如何在HTML中重复div元素n次？

Question

如何复制一个<div>使用JavaScript的n份副本？

从1开始:

<div class="box"></div>

最终得到5:

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Answer 1

使用纯JS 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);

通过true作为第三个参数multiplyNode复制子节点了.

这是一个演示.

Answer 2

看看小提琴以获得您的结果

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>

Answer 3

使用phpapache 服务器，将扩展名从 更改为.html并.php使用：

<?php

for ($i = 1; $i <= 10; $i++) {
    echo "<div id='box'></div>";
}

?>