问题描述
我希望在单击按钮时复制一个 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")); }
推荐答案
你正在创建一个无限递归!
You are creating an infinite recursion!
function duplicate() { var div = duplicate("div");
函数一遍又一遍地调用自己.使用 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); }
如果你不在表单中,你应该使用 <button> 而不是 <input type="button">.
If you are not in a form, you should use <button> instead of <input type="button">.
工作演示 2