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

Question

How can I duplicate a <div> so there are n copies using JavaScript?

Start with 1:

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

End up with 5:

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

Answer 1

Using the pure 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);

Pass true as third argument to multiplyNode to copy child nodes too.

Here's a demo.

Edit:

With ES6 condensed syntax, the above example becomes:

const node = document.querySelector('.box');
[...Array(5)].forEach(_ => node.parentNode.insertBefore(node.cloneNode(true), node));

Answer 2

Take a look at the fiddle to get your result

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

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

jQuery("#container_div_id").append(jQuery("#container_div_id").children().first().clone())

Check fiddle

Answer 4

Make use of php with apache server, change the extension from .html to .php and use:

<?php

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

?>