Question

这个javascript代码有点问题，当我在列表中添加更多网站时，页面无法加载。我必须添加200多个网站。

我是一个使用javascript的菜鸟。有人可以解释什么是问题，什么

我做错了吗？

 <script language="JavaScript" type="text/javascript">
var a = new Array(
'notiziepericolose.blogspot.it',
'ilcorrieredellanotte.it',                                       
'ilmattoquotidiano.it',
'ilfattonequotidiano.com',
'rebubblica.altervista.org',
'coriere.net'

);
var aa = a.slice();
aa.sort();
document.write("<ol>");
document.write("<b>");
for (i = 0; i < a.length; i=i+1) {
document.write('<li id="demo'+i+'">'+a[i]+'</li>');
}
document.write("</b>");
document.write("</ol>");
</script>

Answer 1

如果您正在使用数组，则可以使用forEach而不是循环。

＆＃13;

var domUpdate = '';
var websites = ['notiziepericolose.blogspot.it','ilcorrieredellanotte.it','ilmattoquotidiano.it','ilfattonequotidiano.com','rebubblica.altervista.org','coriere.net'];

websites.forEach(function(website, index){
  domUpdate += '<li id="website-' + ( index + 1 ) + '"><b>' + website + '</b></li>';
});

document.getElementById('hook').innerHTML = '<ol>' + domUpdate + '</ol>';

＆＃13;

<div id="hook"></div>

＆＃13;

Answer 2

如果您可以使用ES6，您可以这样做：

＆＃13;

var a = new Array(
'notiziepericolose.blogspot.it',
'ilcorrieredellanotte.it',                                       
'ilmattoquotidiano.it',
'ilfattonequotidiano.com',
'rebubblica.altervista.org',
'coriere.net');

var aa = a.slice();
var mL = document.getElementById('mylist');
aa.sort().map(el => {
		var li = document.createElement("li");
		var b  = document.createElement("b");
		var t  = document.createTextNode(el);
                b.appendChild(t);
                li.appendChild(b); 
		mL.appendChild(li);
});

＆＃13;

<ol id="mylist"></ol>

＆＃13;

Answer 3

我认为document.write在这里是错误的选择，因为它似乎正在清除文档。 https://developer.mozilla.org/en-US/docs/Web/API/Document/write可能你想通过document.getElementById或类似的东西将新内容绑定到现有的html

Answer 4

我想第一件事就是document.write现在很少使用，因为有更好更有效的方法可以向DOM添加内容（元素，文本等）（稍后会详细介绍）。此外，在您的情况下，您没有意识到document.write与echo或println不同;每次使用它都会清除文档，这可能是您没有看到任何内容的原因。换句话说，多个document.write的结果不累积。

第二件事是有更好的方法来标记＆＃34;元素而不是id，特别是如果页面上有很多像你一样的元素。同样，现在有更好的方法来定位元素或捕捉事件，而不是十年或十五年前。

所以，让我们谈谈你的代码。

您可以使用[]括号快速创建数组。

var arr = [
  'notiziepericolose.blogspot.it',
  'ilcorrieredellanotte.it',
  'ilmattoquotidiano.it',
  'ilfattonequotidiano.com',
  'rebubblica.altervista.org',
  'coriere.net'
];

您不必创建数组的副本以便sort - 它可以在适当的位置完成：

arr.sort();

我要保留你的循环但是向你展示了一种将字符串连接在一起的不同方式。有些人喜欢在一起添加字符串，但我更喜欢这种方式，而且要创建一个字符串的小部分数组，然后join()将它们组合在一起**。

// Set l as the length, and create an output array called list
for (var i = 0, l = arr.length, list = []; i < l; i++) {

  // I've changed things here. I've added a class called item
  // but also changed the element id to a data-id instead
  var li = ['<li class="item" data-id="', i, '">', arr[i], '</li>'];

  // Push the joined li array of strings into list
  list.push(li.join(''));
}

假设您的网页上有一个名为＆＃34; main＆＃34;：

的元素

HTML

<div id="main"></div>

JS

您可以使用[main]方法将列表数组作为HTML字符串添加到insertAdjacentHTML：

var main = document.getElementById('main');

// Note that I've given the ordered list an id called list
var HTML = ['<ol id="list"><b>', list.join(''), '</b></ol>'].join('');
main.insertAdjacentHTML('beforeend', html);

好的，这很容易。但我敢打赌你会问你如何定位列表中的各个项目，这样如果我点击其中一个项目就可以提醒它（或者其他什么）。

我们不会在每个列表项中添加一个事件监听器（我们可以这样做，但它可以使用的项目越多，表现越来越昂贵），我们将一个附加到{ {1}}元素我们添加ol id并在项目冒出时捕获项目中的事件：

list

然后将一个事件监听器添加到列表中，告诉我们在引发click事件时调用了什么函数（var ol = document.getElementById('list');）：

checkItem

我们的功能使用事件（ol.addEventListener('click', checkItem);）来查找事件的目标是什么（点击了什么项目），并提醒其文本内容。

您可以看到所有这些 in this demo 。希望其中一些有所帮助。

**这是另一种排序方式，并使用reduce循环遍历数组：

function checkItem(e) {
  alert(e.target.textContent);
}

DEMO

Javascript代码无法加载页面

4 个答案: