Question

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

如何使用innerHTML专有权更改此元素中的文字：

＆＃13;

(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!!
  }
})();

＆＃13;

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

＆＃13;

Answer 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>

Answer 2

仅供记录：您的代码可以缩减为

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

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

Answer 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>

Javascript数组和innerHTML

3 个答案: