javascript - 使用 for 循环创建多个 div

Question

这是一个非常简单的问题，但我不知道为什么它不起作用。 我有一个包含 3 个元素的数组。我有一个容器，我想根据数组中的元素数插入一些 div。我为此使用了一个 for 循环，但它只创建了一个 div。它不应该创建 3 吗？

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

这里有一个 fiddle 可以进一步演示 fiddle

Answer 1

将 container 移出循环，在循环中不需要它。

在每次迭代中附加 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 may look like involving more lines of code but this will be more efficient and less error-prone than the previous solution.