使用for循环创建多个div [英] create multiple divs using a for loop

问题描述

这是一个非常简单的问题，但我不知道为什么它不起作用。
我有一个包含3个项目的数组。我有一个容器，我想根据我的数组中的项目数插入一些div。我为此使用了for循环，但它只创建一个div。 （var i = 0; i< array.length; i ++）{$ b $是否应该创建3？

  b var container = document.getElementById（container）; 
 container.innerHTML ='< div class =box>< / div>'; 
} 
  

这里是一个演示进一步 fiddle

解决方案

在每次迭代中附加innerHTML。

  var container = document.getElementById（container）; 
 for（var i = 0; i< array.length; i ++）{
 container.innerHTML + ='< div class =box>< / div>'; 
} 
  

编辑：

感谢佳能，您的意见。我也想提出和你一样的方法，但是我在发布答案后忙于其他工作[没有任何借口:)]更新答案：

  var htmlElements =; 
 for（var i = 0; i< array.length; i ++）{
 htmlElements + ='< div class =box>< / div>'; 
} 
 var container = document.getElementById（container）; 
 container.innerHTML = htmlElements; 
  

这可能看起来像涉及更多的代码行，但这会更多高效且比以前的解决方案更少出错。

This is a really simple question but I don't know why it doesn't work. I have an array with 3 items inside. And I have a container which I would like to insert a number of divs based on the number of items in my array. I used a for loop for this but it is only creating one div. Should it not create 3?

for (var i = 0; i < array.length; i++) {
   var container = document.getElementById("container");
   container.innerHTML = '<div class="box"></div>';
}

here is a fiddle to demonstrate further fiddle

解决方案

Move container out of the loop, it is not required inside it.

Append the innerHTML in each iteration.

var container = document.getElementById("container");
for (var i = 0; i < array.length; i++) {
   container.innerHTML += '<div class="box"></div>';
}

Edit:

Thanks Canon, for your comments. I also wanted to suggest the same approach as yours, but I got busy in some other work after posting the answer [No excuses :)] Updating the answer:

var htmlElements = "";
for (var i = 0; i < array.length; i++) {
   htmlElements += '<div class="box"></div>';
}
var container = document.getElementById("container");
container.innerHTML = htmlElements;

This may look like involving more lines of code but this will be more efficient and less error-prone than the previous solution.

这篇关于使用for循环创建多个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！