javascript复制div更改innerHTML id答案

【问题标题】：javascript copy div change innerHTML idjavascript复制div更改innerHTML id
【发布时间】：2016-01-06 04:57:03
【问题描述】：

我需要通过更改按钮的 id 将内容从一个 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>

有什么简单的方法吗？

【问题讨论】：

您需要执行多少次？你能存储你当前拥有的 div 的数量并增加它吗？
“克隆”将从 2 开始，以带有 for 循环的 X 结束，我认为解决方案将是 slice() 函数，其中 number++ 将添加到 id 和按钮的末尾文本。每次它都应该创建一个带有新按钮的新 div（二、三、...）。

标签： javascript jquery html css

【解决方案1】：

如果你想复制一个按钮的 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>

【讨论】：

按钮 ID 将在每次单击按钮时增加一。 Id 将是 one1, one2 ....

【解决方案2】：

我对包装 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 以更简单的方式完成。希望这会有所帮助。

【讨论】：

【解决方案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>

【讨论】：

【解决方案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');

【讨论】：