如何使用 javascript 复制 div onclick？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4427094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can i duplicate a div onclick with javascript?
提问by Opoe
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?
我希望在单击按钮时复制一个 div。我虽然是这样的；但它不起作用。谁能帮我？
HTML
HTML
<div id="duplicater">
duplicate EVERYTHING INSIDE THIS DIV
</div>
JAVASCRIPT
爪哇脚本
function duplicate()
{
var div = duplicate("div");
div.id = "duplicater";
div.appendChild(duplicate("duplicater"));
}
回答by Felix Kling
You are creating an infinite recursion!
您正在创建无限递归！
function duplicate()
{
var div = duplicate("div");
The function is calling itself over and over again. Use cloneNode():
该函数一遍又一遍地调用自己。使用cloneNode()：
HTML:
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);
}
Or without IDs:
或者没有身：
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);
}
Update:
更新：
If you want to clone the div on button click, you can use a slightly different version:
如果要在单击按钮时克隆 div，可以使用稍微不同的版本：
HTML:
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);
}
If you are not in a form, you should use <button>instead of <input type="button">.
如果您不在表单中，则应使用<button>代替<input type="button">。
回答by stephenmurdoch
Can you change the div to a class? If so, then thismight work for you:
你能把div改成一个类吗？如果是这样，那么这可能对您有用：
# application.js
$(function(){
$('.photo:last').after('<a href="#" id="new_resource">Add another image<a/><br/>');
$('a[href=#]').click(function(){
$(this).before($('.photo:last').clone());
$('.photo:last input').each(function(){
$(this).removeAttr("value");
});
$('.photo:last input[type=hidden]').remove();
return false;
});
})
#html
<div class="photo"
<label>label</label>
<input type="file"></input>
</div>
Edit the code here:
在这里编辑代码：
回答by Tanya Sinha
<table>
<tr>
<td>
<div id="duplicater">
duplicate EVERYTHING INSIDE THIS DIV
</div>
</td>
</tr>
</table>
<button id="button">Click me</button>
$("#button").on('click', function (e) {
e.preventDefault();
var $self = $(this);
$self.before($self.prev('table').clone());
});
