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

Posted 2023-05-07

【中文标题】JavaScript 使用 for 循环创建填充了 innerHTML 内容的 p 标记

【英文标题】：JavaScript use for loop to create p tag with innerHTML content filled in

【发布时间】：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。

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