如何为DOM中的每个元素添加不同的文本

时间:2017-07-18 07:56:41

标签: javascript html loops dom innerhtml

有人可以告诉我这段代码有什么问题。我想添加一个从0到4的数字,但它只添加了我循环中的最后一个数字。 非常感谢你提前。

<script>
    for (i = 0; i < 5; i++) {
      var createEl = i;
      var createEl = document.createElement("li");
      for (j = 0; j < 5; j++) {
        createEl.innerHTML = [j];
        }
      console.log(createEl); 
      //<li>4</li>
      //<li>4</li>
      //<li>4</li>
      //<li>4</li>
      //<li>4</li>
    }

2 个答案:

答案 0 :(得分:0)

你不需要嵌套for循环只需使用第一个循环中的i值

for (i = 0; i < 5; i++) {
   var createEl = document.createElement("li");
   createEl.innerHTML = i;
   console.log(createEl); 
}

这只会将标签打印到控制台。如果你想把它们放在另一个标签中,请使用它:

var node = document.createElement("div");
for (i = 0; i < 5; i++) {
   var createEl = document.createElement("li");
   createEl.innerHTML = i;
   node.appendChild(createEl);
}

答案 1 :(得分:0)

你不需要两个循环。

var ulContainer = document.createElement("ul"); 

for (i=0; i < 5; i++) {
var createEl = document.createElement("li");
  createEl.innerHTML = i;
  ulContainer.appendChild(createEl); 
}