Javascript копия изменений DIV innerHTML идентификатор

Question

Мне нужно скопировать содержимое из одного DIV на другой с идентификатором меняющегося баттона (увеличиваем их)

Пример:

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

Любой простой способ, как это сделать?

Answer 1

Я сделал небольшое изменение в 'ид' оберточной дел.

 <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. Надеюсь это поможет.

Answer 2

Если вы хотите скопировать кнопку OnClick для кнопки он будет работать для вас я думаю ..

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 3

Вы ищете что-то вроде этого. При хорошем мастерстве прохождения 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>

Answer 4

Использование 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');