我希望在单击按钮时复制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"));
}
答案 0 :(得分:38)
您正在创建无限递归!
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);
}
或没有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">
。
答案 1 :(得分:0)
您可以将div更改为班级吗? 如果是这样,那么this可能适合您:
# 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>
编辑代码here:
答案 2 :(得分:0)
<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());
});