Javascript 如何在HTML中重复div元素n次？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30267973/
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
How to repeat div element n times in HTML?
提问by Sajad
How can I duplicate a <div>so there are n copies using JavaScript?
如何<div>使用 JavaScript复制 a以便有 n 个副本？
Start with 1:
从 1 开始：
<div class="box"></div>
End up with 5:
以 5 结束：
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
回答by Web_Designer
Using the pure JS node.cloneNode:
使用纯 JS node.cloneNode：
https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode
https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode
function multiplyNode(node, count, deep) {
for (var i = 0, copy; i < count - 1; i++) {
copy = node.cloneNode(deep);
node.parentNode.insertBefore(copy, node);
}
}
multiplyNode(document.querySelector('.box'), 5, true);
Pass trueas third argument to multiplyNodeto copy child nodes too.
通过true作为第三个参数multiplyNode复制子节点了。
Edit:
编辑：
With ES6 condensed syntax, the above example becomes:
使用 ES6 压缩语法，上面的例子变成：
const node = document.querySelector('.box');
[...Array(5)].forEach(_ => node.parentNode.insertBefore(node.cloneNode(true), node));
回答by Mahedi Sabuj
Take a look at the fiddle to get your result
看看小提琴以获得你的结果
https://jsfiddle.net/dcpg4v1c/
https://jsfiddle.net/dcpg4v1c/
$(document).ready(function(){
for(var i = 0; i< 5; i++)
$("#dvMain").append("<div class='row'>Test</div>");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='dvMain'></div>回答by Abhi
Create a container div with a id and place <div class="box"></div>inside it. Then using jQuery you can run a loop for desired number of time and append divs like
创建一个带有 id 的容器 div 并将其<div class="box"></div>放入其中。然后使用 jQuery，您可以运行一个循环所需的时间并附加 div，例如
jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())
Check fiddle
检查小提琴
回答by Richie Rizal Amir
im using jquery here. You can place div parent as i used in example "divRepeat"
我在这里使用 jquery。您可以像我在示例“divRepeat”中使用的那样放置 div 父级
<div id="divRepeat">
<div class="box"></div>
</div>
in Jquery
在 jQuery 中
for(var i=0;i<("how many repeat do you want");i++){
$("#divRepeat").append($(".box").html());
//you can add other logic here, like you want diferent id or class to add in new box
}
回答by bugs2919
Make use of phpwith apache server, change the extension from .htmlto .phpand use:
使用phpapache 服务器，将扩展名从 更改.html为.php并使用：
<?php
for ($i = 1; $i <= 10; $i++) {
echo "<div id='box'></div>";
}
?>
