如何在HTML中重复div元素n次？ [英] How to repeat div element n times in HTML?

问题描述

如何复制< div> 所以使用JavaScript有n个副本？

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

从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>

推荐答案

使用纯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 作为<$的第三个参数c $ c> multiplyNode 也可以复制子节点。

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

这是一个演示。

编辑：

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

With ES6 condensed syntax, the above example becomes:

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

这篇关于如何在HTML中重复div元素n次？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！