我需要将内容从一个div复制到另一个div,并更改按钮的id(递增)
样品:
<script type="text/javascript">
function add(){
document.getElementById('two').innerHTML = document.getElementById('one').innerHTML;
}
</script>
<div id="one">
<button id="button_1" >Button_1</button>
</div>
<div id="two"></div>
<button onclick="add();">Add</button>
这当然不能正常工作。
结果应如下:
<div id="two">
<button id="button_2" >Button_2</button>
</div>
有什么简单的方法可以做到这一点吗?
如果你想在点击按钮时复制按钮,我想它会为你工作的。。
document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('one');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "one" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
}
<div id="one">
<button id="button_1" >Button_1</button>
</div>
<button id="button" style="color:red">Add</button>
我对包装div的"id"做了一些小的更改。
<div id="1" class="button">
<button id="button_1" >Button_1</button>
</div>
<button onclick="add();">Add</button>
<script type="text/javascript">
function add(){
var count = document.querySelectorAll('.button').length;
var newCount = count+1;
var elDiv = document.createElement('div');
elDiv.setAttribute("id", newCount);
elDiv.setAttribute("class", "button");
elDiv.innerHTML = '<button id="button_"+newCount+">Button_'+newCount+"</button>";
document.getElementById(count).appendChild(elDiv);
}
</script>
然而,使用jQuery可以以更简单的方式完成。希望这能有所帮助。
你在找这样的东西吗。掌握了jQuery遍历之后,您甚至可能不需要给每个按钮一个id。也许是一个公共类可以很好地为您服务。
$(function() {
var last = $('.container');
var curr = last;
$('#add').on('click', function() {
last = curr.clone();
last.find('button').attr('id', function() {
return 'button_' + ( $('div.container').length + 1 );
})
.html(function() {
return 'Button_' + ( $('div.container').length + 1 );
}).end()
.insertAfter( curr );
curr = last;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button id="button_1" >Button_1</button>
</div>
<button id="add">Add</button>
使用JQuery:
function add( fromId, toId ){
content = $('#'+fromId).clone();
button = content.find('button');
if( button.length == 1 ){
buttonId = button.attr('id');
number = buttonId.match(/d+/g);
number = parseInt(number[0]) + 1;
button.attr('id','button_' + number);
button.html('Button_' + number);
}
$('#'+toId).html(content.html());
}
只需致电
add('one','two');