Question

我正在尝试克隆div及其所有子节点，并在用户单击按钮并更改子元素的id时将克隆附加到原始节点的末尾，但由于某种原因，我可以＆甚至让我的div克隆并追加。

<div id="section">
    //bunch of textboxes, labels, etc.
</div>

这是我的按钮

<input type="button" value="Add New Section" id="addSection"/>

这是我的Jquery

$(function() {
    var $section = $("#section").clone();  

    $( "#addSection" ).click(function() { 
        $section.append(); // I've tried this and appendTo, Insert, InstertAfter, After, etc.. still cannot get this to work.. 
    });
});

忽略这一事实，即这不会改变任何子元素ID，为什么这不是克隆和追加？

修改

我想澄清一下，我正在尝试克隆我的div的原始状态，并在每次点击我的按钮时附加。

Answer 1

假设您要在原始之后插入克隆部分，我们想要在click（而不是之前）上进行克隆，因此如果调用超过一次。

然后我们替换id（我使用当前时间使ID唯一，您可以执行其他操作），并insertAfter()将其放在原始元素之后：< / p>

＆＃13;
＆＃13;
$("#addSection").click(function() { var section = $("#section").clone(); section.attr('id', 'section' + (new Date()).getTime()); section.insertAfter( $('#section') ); });
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="section"> <p>bunch of textboxes, labels, etc.</p> </div> <input type="button" value="Add New Section" id="addSection" />
＆＃13;
＆＃13;
＆＃13;

Answer 2

您需要在jQuery的附加功能中传递内容。

前 -

$（＆＃39;＃YOUR_ELEMENT_ID＆＃39）。追加（＆＃39; YOUR_CONTENT＆＃39）

这就像，

$(function() {    
  var $section = $("#section").clone(); 
    $( "#addSection" ).click(function() { 
        var $sectionClone = $section.clone();
        $('#section').append($sectionClone); 
    });
});

工作演示HERE

Answer 3

您需要指定一个选择器以将元素追加到。

$('#section').append($section)

或者

$section.appendTo('#section')

或使用.after()在原始文件之后插入克隆元素。

$('#section').after($section)

编辑：您需要在点击后克隆该元素，以使其每次都有效。

如此集成的功能，

$(function(){
    $( "#addSection" ).click(function(){
        var $section = $("#section").clone();  
        $section.attr('id','someUniqueId');
        $('#section').after($section); 
    });
});

Demo

Answer 4

试试这个：

$(function(){
  var $section = $("#section").clone();  

  $( "#addSection" ).click(function() { 
    $("#section").append($section);
  });
});

克隆并追加div

4 个答案: