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以复制子节点。

Here's a demo.

编辑：

使用ES6压缩语法，上面的示例变为：

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

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

创建一个带有id的容器div，并在其中放置<div class="box"></div>。然后使用jQuery，你可以运行一个循环所需的时间，并附加像

这样的div

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

检查fiddle

Answer 4

我在这里使用jquery。您可以像我在示例“ divRepeat”中使用的那样放置div父对象

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

在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
}

Answer 5

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

<?php

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

?>

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

5 个答案: