問題描述

我希望在單擊按鈕時復(fù)制一個 div.我雖然是這樣的；但它不起作用.誰能幫幫我?

I want a div to be duplicated when a button is clicked. I though something like this; but it's not working. Can anyone help me?

HTML

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

JAVASCRIPT

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

推薦答案

你正在創(chuàng)建一個無限遞歸！

You are creating an infinite recursion!

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

函數(shù)一遍又一遍地調(diào)用自己.使用 cloneNode():

The function is calling itself over and over again. Use cloneNode():

HTML:

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

JavaScript:

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);
}

工作演示

或者沒有 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，你可以使用稍微不同的版本:

If you want to clone the div on button click, you can use a slightly different version:

HTML:

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

JavaScript:

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);
}

如果你不在表單中，你應(yīng)該使用 <button> 而不是 <input type="button">.

If you are not in a form, you should use <button> instead of <input type="button">.

工作演示 2

這篇關(guān)于如何復(fù)制 div onclick 事件?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！