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

Posted

技术标签:

【中文标题】如何为 DOM 中的每个元素添加不同的文本【英文标题】:How to add diferent text for each element in DOM 【发布时间】:2017-12-22 23:08:10 【问题描述】:

谁能告诉我这段代码有什么问题。我想添加一个从 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>
    

【问题讨论】:

【参考方案1】:

您不需要嵌套的 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);

【讨论】:

【参考方案2】:

你不需要两个循环。

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

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

【讨论】:

以上是关于如何为 DOM 中的每个元素添加不同的文本的主要内容,如果未能解决你的问题,请参考以下文章

PySpark:如何为数组列中的每个元素添加值?

如何为下拉菜单中的下拉菜单和颤动中选择的项目添加不同的文本样式?

如何为页面上的元素添加填充?

如何为 geom_tile 中的每个变量添加单独的图例?

如何为文本添加一些边框? [复制]

如何为使用可变 alpha 创建的 vspan 添加颜色条