javascript - 如何复制 div onclick 事件？

Question

我希望在单击按钮时复制一个 div。我虽然是这样的；但它不工作。谁能帮帮我？

HTML

<div id="duplicater"> 
duplicate EVERYTHING INSIDE THIS DIV
</div>

JavaScript

function duplicate()
{
var div = duplicate("div");
    div.id = "duplicater";
div.appendChild(duplicate("duplicater"));
}

Answer 1

你正在创建一个无限递归!

function duplicate()
{
    var div = duplicate("div");

该函数一遍又一遍地调用自己。使用 cloneNode() :

HTML:

<div id="duplicater0"> 
duplicate EVERYTHING INSIDE THIS DIV
</div>

JavaScript:

var i = 0;

function duplicate() {
    var original = document.getElementById('duplicater' + i);
    var clone = original.cloneNode(true); // "deep" clone
   clone.id = "duplicater" + ++i; // there can only be one element with an ID
    clone.onclick = duplicate; // event handlers are not cloned
    original.parentNode.appendChild(clone);
}

Working DEMO

或者没有 ID:

function duplicate() {
    var clone = this.cloneNode(true); // "deep" clone
    clone.id = ""; // there can only be one element with an ID
    clone.onclick = duplicate; // event handlers are not cloned
    this.parentNode.appendChild(clone);
}

更新:

如果你想在按钮点击时克隆 div，你可以使用稍微不同的版本:

HTML:

<button id="button" onclick="duplicate()">Click me</button>
<div id="duplicater"> 
    duplicate EVERYTHING INSIDE THIS DIV
</div>

JavaScript:

var i = 0;
var original = document.getElementById('duplicater');

function duplicate() {
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicater" + ++i;
    // or clone.id = ""; if the divs don't need an ID
    original.parentNode.appendChild(clone);
}

如果你不在表格中，你应该使用<button>而不是 <input type="button"> .

Working DEMO 2