JavaScript使用for循环创建带有内部HTML内容的p标签

Question

我正在使用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 = "|";


}

Answer 1

你并不需要调用getElementsByClassName可以改变的innerHTML line ，因为你已经有了参考的DOM元素。

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

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

   }

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

Answer 2

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

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

---

如需更好的选择，请参考以下更改。 这个：

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

JS小提琴 ：

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