Javascript数组和innerHTML答案

【问题标题】：Javascript array and innerHTMLJavascript数组和innerHTML
【发布时间】：2014-12-06 15:12:21
【问题描述】：

我刚开始使用 JavaScript，但遇到了一点问题。

如何使用innerHTML 属性来更改此元素中的文本：

(function showArray(){
  var names = new Array("Bob ","Alice ","Ceaser ","David");
  names.sort();

  for (var i = 0; i < names.length; i++) {
    document.getElementById("loop").innerHTML = names[i];
    // I'm only getting "David" as output!!
  }
})();

&lt;p id="loop"&gt;David Alice Bob Ceaser&lt;/p&gt;

【问题讨论】：

将innerHTML = 更改为innerHTML +=。

标签： javascript arrays innerhtml

【解决方案1】：

试试这个，你也只需要加入名字。

function showArray() {
  var names = new Array("Bob ", "Alice ", "Ceaser ", "David");
  names.sort();

  document.getElementById("loop").innerHTML = names.join(" ");
}

showArray();

&lt;p id="loop"&gt;David Alice Bob Ceaser&lt;/p&gt;

【讨论】：

此答案有效，但如果您只想将文本放入 DOM 节点，则应使用 innerText 而不是 innerHTML。这是一个好习惯，可以让您在未来免受代码注入攻击，即使在本示例中无关紧要。
@RaphaelSerota innerText 不是标准的。应该是textContent。
糟糕，我的错。无论哪种方式，重点是您应该注意允许用户注入 DOM 的内容。

【解决方案2】：

仅作记录：您的代码可以简化为

 (function() {
   document.querySelector("#loop").innerHTML = 
       ["Bob ", "Alice ", "Ceaser ", "David"].sort().join(" ");
 }())

&lt;p id="loop"&gt;&lt;/p&gt;

【讨论】：

【解决方案3】：

在这种情况下，最好按照@DaveChen's answer 中的建议使用Array.prototype.join。

但是，您不能总是使用它。对于这些情况：

DOM 操作很慢。所以，
- 不要在循环中使用getElementById。相反，将元素存储在循环之前的变量中。
- 不要在每次迭代时修改innerHTML。相反，更新一个字符串变量并且只在循环之后修改innerHTML。
使用[] 创建数组比使用Array 构造函数更快，而且更短。

但是，请注意，使用innerHTML 可能会产生 html 注入。如果您只想添加文字，最好使用textContent。

(function showArray(){
  var names = ["Bob ","Alice ","Ceaser ","David"],
      el = document.getElementById("loop"),
      html = '';
  names.sort();
  for (var i = 0; i < names.length; i++) html += names[i];
  el.textContent = html;
})();

&lt;p id="loop"&gt;David Alice Bob Ceaser&lt;/p&gt;

【讨论】：