Question

我希望在单击div后自己复制button。我找到了 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()。您还需要传递一个布尔参数进行克隆，以便将所有数据和事件处理程序附加到克隆元素。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

<强> 更新

＆＃13;

$(document).ready(function (){
  $('button').click(function (){
        $('.example-1').append($('.example-1').html())
    
        //console.log($('.example-1').html());
    })
  
  })

＆＃13;

<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>

<!--its only print at once-->

＆＃13;

Answer 3

试试这个

＆＃13;

$('.btn-copy').click(function ()
{
$('.example-1').append($('.example-2').html());

});

＆＃13;

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

＆＃13;

Answer 4

使用clone方法。像这样：

$(document).on(click,'.btn-copy',function(){
  $(this).parents('.example-1').append($(this).parent().clone());
});

希望它有所帮助。

Answer 5

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<BODY>
<script>
$( document ).ready(function() {
  $(".btn-copy").click(function(event){
    console.log('You clicked button');
    var parentnode=this.parentNode;
    var OuterHtml=parentnode.outerHTML;
    var TopLevel=parentnode.parentNode;
    $(TopLevel).append(OuterHtml);
  });
});
</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>
</BODY>
</HTML>

如何使用jQuery复制div？

5 个答案: