如何使用jQuery中的所有子元素克隆父元素？

Question

I have the following code to Add new Paragraph when I click on a button. I'm cloning the "sub" div and append it to the "main" div. But with cloning the "sub" div, it is copying only the content of "sub" div which is "inner" div instead copying with the "sub" div. I need to have several "sub" divs after cloning it several times. But now only the first paragraph has "sub" parent div and all the other cloning divs has "inner" parent div. How can I do this?

 $("button").on("click", function() { $(".main").append($(".sub:last").clone().html()); }); 

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <div class="main"> <div class="sub"> <div class="inner"> <p> New Paragraph </p> </div> </div> </div> <button>Add new</button> 

Answer 1

You need to add specific arguments if you want a deep copy (see the .clone() docs for more):

 $("button").on("click", function(){ $(".main").append($(".sub:last").clone(true, true)); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main"> <div class="sub"> <div class="inner"> <p> New Paragraph </p> </div> </div> </div> <button>Add new</button> 

EDIT

Above, I removed .html() so the <div class="sub> will be added to the main div, not just the inner div.