javascript复制div更改innerHTML id

Question

I need to copy content from one div to another one with changing button's id (increment them)

Sample:

<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>

This of course can't work properly.

Result should be following:

<div id="two">
  <button id="button_2" >Button_2</button>
</div>

Any simple way how to do this ?

Answer 1

If you want copy the button onclick of a button it will work for you i guess..

 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> 

Answer 2

Are you looking for something like this. With a good mastery of jQuery traversal you may not even need to give each button an id. May be a common class may serve you well.

 $(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> 

Answer 3

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

Just call

add('one','two');

Answer 4

I've made small change in 'id' of the wrapping div.

     <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>

However it can be done in more simpler way using jQuery. Hope this helps.