克隆和附加一个 div

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（而不是之前）上进行克隆，因此如果多次调用，这将起作用。 p>

然后我们替换id（我使用当前时间来使id唯一，你可以做其他事情），并将insertAfter()放在我们原始元素之后：

$("#addSection").click(function() {

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

  section.attr('id', 'section' + (new Date()).getTime());

  section.insertAfter( $('#section') );
});

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

Answer 2

你需要在jQuery的append函数中传递内容。

前-

$('#YOUR_ELEMENT_ID').append('YOUR_CONTENT')

这里会是这样的，

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

工作演示HERE

Answer 3

试试这个：

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

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

Answer 4

你需要指定一个选择器来追加元素。

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