Javascript 使用 for 循环创建多个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31919869/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
create multiple divs using a for loop
提问by Sai
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?
这是一个非常简单的问题，但我不知道为什么它不起作用。我有一个里面有 3 个项目的数组。我有一个容器，我想根据数组中的项目数插入多个 div。我为此使用了 for 循环，但它只创建了一个 div。它不应该创建 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
这是一个小提琴来演示进一步的小提琴
回答by Vivek Jain
Move containerout of the loop, it is not required inside it.
将container循环出来，它不是必需里面。
Append the innerHTML in each iteration.
在每次迭代中附加 innerHTML。
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.
这可能看起来涉及更多行代码，但与之前的解决方案相比，这将更高效且不易出错。
回答by Hardik Raval
Replace =to +=
替换=为+=
As per the @canon comment, edited answer are below
根据@canon 评论，编辑后的答案如下
var innerHTMLString = "";
forloop {
innerHTMLString += '<div class="box"></div>';
}
document.getElementById("htmlElements").innerHTML = innerHTMLString
回答by Pavel Kharibin
Replace this
替换这个
container.innerHTML = '<div class="box"></div>';
with this
有了这个
container.innerHTML += '<div class="box"></div>';
回答by Pavel Kharibin
If you want to create more than one, you must call createElement more than once.
如果要创建多个，则必须多次调用 createElement。
d=document.createElement("div");
line into the j loop.
If you call appendChild passing in an element that's already in the DOM, it's moved, not copied.
如果你调用 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";
}
}
}
}
回答by M3ghana
Javascript Method -
Javascript 方法 -
var container = document.getElementById("container");
for (var i = 0; i < array.length; i++) {
container.innerHTML += '<div class="box"></div>';
}
jQuery Method -
jQuery 方法 -
foreach(array as value){
$("#container").append('<div class="box"></div>')
}
回答by Dzenis H.
For further references; what about this approach? :)
供进一步参考；这种方法怎么样？:)
HTML:
HTML：
<div class="particles">
<div class="parts"></div>
</div>
JavaScript:
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)
);
