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

的小提琴

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;

这看起来可能涉及更多的代码行，但这比以前的解决方案更有效，更不容易出错。

Answer 2

将=替换为+=

根据@canon评论，编辑后的答案在

之下

var innerHTMLString = "";  
forloop {
    innerHTMLString += '<div class="box"></div>';
}
document.getElementById("htmlElements").innerHTML = innerHTMLString

Answer 3

替换此

container.innerHTML = '<div class="box"></div>';

用这个

container.innerHTML += '<div class="box"></div>';

Answer 4

如果要创建多个，则必须多次调用createElement。

d=document.createElement("div");
line into the j loop.

如果你调用appendChild传入一个已经存在于DOM中的元素，它就会被移动，而不是被复制。

window.onload=function()
{
    var i=0;
    var j=0;

    for (i=1; i<=8; i++)
    {
        for (j=1; j<=8; j++)
        {
            if ((i%2!=0 && j%2==0)||(i%2==0 && j%2!=0))
            {
                var d=document.createElement("div");
                document.body.appendChild(d);
                d.className="black";
            }
            else
            {
                var d=document.createElement("div");
                document.body.appendChild(d);
                d.className="white";
            }
        }
    }
}

Answer 5

Javascript方法 -

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

jQuery方法 -

foreach(array as value){
    $("#container").append('<div class="box"></div>')
}

Answer 6

进一步参考；那这种方法呢？：）

HTML：

<div class="particles">
   <div class="parts"></div>
</div>

JavaScript：

// Cloning divs where particles go in order not to put 300 of them in the markup :)

 const node = document.querySelector(".parts");
 [...Array(300)].forEach(_ =>
 node.parentNode.insertBefore(node.cloneNode(true), node)
 );

使用for循环创建多个div

6 个答案:

编辑：