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即可更改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返回一组元素，你需要循环它们。

Answer 2

getElementsByClassName应该返回一个元素数组，而不是单个元素。您可以尝试：getElementsByClassName('line')[i]，如果您有某种原因，那就是具体。

注意： getElementsByClassName('line')[i] 可能不会引用您刚创建的对象，除非没有其他“页面上的行。 它扫描文档中所有具有一个名为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);
}

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

2 个答案:

JS Fiddle