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

Question

我正在使用 for 循环根据我的 array 的长度生成段落标记。我希望生成的每个 p 标签都具有相同的 innerHTML。我可以获得使用 class 名称生成的标签，但 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 应该 return 一个元素数组，而不是单个元素。您可以尝试：getElementsByClassName('line')[i]，如果您出于某种原因专门这样做。

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

如需更好的替代方案，请参考以下所做的更改。这个：

将 numArray 长度缓存到一个变量中，因此您不会在每次循环迭代时执行该操作
在将其附加到文档之前设置您创建的元素的 HTML 和类名；它具有许多性能优势
不会不必要地对元素进行 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);
}

Answer 2

您不需要调用 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 returns 元素的集合，您需要遍历它们。

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

JavaScript use for loop to create p tag with innerHTML content filled in

html

javascript

dom

for-loop

innerhtml

JS Fiddle: