javascript - 如何使用 jQuery 在点击时复制 div？

Question

我希望在单击按钮 时复制一个div。我找到了 JS 解决方案，但我需要一个 jQuery 解决方案，但我真的很不擅长。谁能帮帮我？

这就是我所拥有的:

<div class="example-1">
  <div class="example-2"> 
    <p>Example one</p>
    <p>Example two</p>

    <button class="btn-copy">Copy</button>
  </div>
</div>

这就是我需要的(点击之后):

<div class="example-1">
  <div class="example-2"> 
    <p>Example one</p>
    <p>Example two</p>

    <button class="btn-copy">Copy</button>
  </div>

  <div class="example-2"> 
    <p>Example one</p>
    <p>Example two</p>

    <button class="btn-copy">Copy</button>
  </div>
</div>

Answer 1

利用 .clone() 复制 div 和 .after() 追加。由于您正在使用类，您可能只想复制一个 div，在这种情况下，您应该使用 .closest()。您还需要将 bool 参数传递给克隆，以便所有数据和事件处理程序都将附加到克隆的元素。

$(function(){
  $(".btn-copy").on('click', function(){
    var ele = $(this).closest('.example-2').clone(true);
    $(this).closest('.example-2').after(ele);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example-1">
  <div class="example-2"> 
    <p>Example one</p>
    <p>Example two</p>

    <button class="btn-copy">Copy</button>
  </div>
</div>