JavaScript 使用 for 循环创建填充了 innerHTML 内容的 p 标记答案

【问题标题】：JavaScript use for loop to create p tag with innerHTML content filled inJavaScript 使用 for 循环创建填充了 innerHTML 内容的 p 标记
【发布时间】：2015-12-31 22:19:25
【问题描述】：

我正在使用 for 循环根据我的 array 的长度生成段落标签。我希望生成的每个 p 标签都具有相同的innerHTML。我可以使用类名生成要生成的标签，但innerHTML 仍然是空白。

我尝试了以下方法无济于事，不知道我做错了什么。

for (i = 0; i < numArray.length; i++) { 

     var line = document.createElement("p");
     line.className = "line";
     document.body.appendChild(line);

     var b = document.getElementsByClassName("line");
     b.innerHTML = "|";


}

【问题讨论】：

你有 JSFiddle 吗？
getElementsByClassName() 返回元素的集合。您需要访问集合中的一个或每个 Element 以分配 innerHTML。

标签： javascript html dom for-loop innerhtml

【解决方案1】：

您无需调用getElementsByClassName，您可以更改line 的innerHTML，因为您已经拥有对DOM 元素的引用。

 for (i = 0; i < numArray.length; i++) { 

      var line = document.createElement("p");
      line.className = "line";
      line.innerHTML = "|"; 
      document.body.appendChild(line);

   }

并解释为什么它不起作用，这是因为 getElementsByClassName 返回一个元素集合，您需要遍历它们。

【讨论】：

【解决方案2】：

getElementsByClassName 应该返回一个元素数组，而不是单个元素。您可以尝试：getElementsByClassName('line')[i]，如果您出于某种原因专门这样做。

注意： getElementsByClassName('line')[i] 可能不会引用你刚刚创建的对象，除非页面上没有其他“行”。 em> 它扫描文档中所有具有名为 line 的类的元素，可以是段落或其他元素类型。

如需更好的选择，请参阅下面所做的更改。这个：

将numArray 长度缓存到变量中，因此您不会在每次循环迭代时执行该操作
在附加到文档之前设置您创建的元素的 HTML 和 ClassName；具有许多性能优势
不会不必要地对元素进行 DOM 查找，这很昂贵
使用var 关键字来避免循环变量的范围冲突

JS Fiddle:

for ( var i=0, n=numArray.length; i < n; i++) { 
  var line = document.createElement("p");
  line.className = "line";
  line.innerHTML = '|';
  document.body.appendChild(line);
}

【讨论】：