Javascript数组和innerHTML

Posted 2023-05-07

【中文标题】Javascript数组和innerHTML

【英文标题】：Javascript array and 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!!
  
)();

<p id="loop">David Alice Bob Ceaser</p>

【问题讨论】：

将innerHTML = 更改为innerHTML +=。

【参考方案1】：

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

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

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


showArray();

<p id="loop">David Alice Bob Ceaser</p>

【讨论】：

此答案有效，但如果您只想将文本放入 DOM 节点，则应使用 innerText 而不是 innerHTML。这是一个好习惯，可以让您在未来免受代码注入攻击，即使在本示例中无关紧要。

@RaphaelSerota innerText 不是标准的。应该是textContent。

糟糕，我的错。无论哪种方式，重点是您应该注意允许用户注入 DOM 的内容。

【参考方案2】：

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

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

<p id="loop"></p>

【参考方案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;
)();

<p id="loop">David Alice Bob Ceaser</p>