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

Question

單擊按鈕時，我有以下代碼可添加新段落。 我正在克隆“ sub” div並將其附加到“ main” div。 但是，通過克隆“ sub” div，它僅復制“ sub” div的內容（即“ inner” div），而不是復制“ sub” div。 克隆幾次后，我需要有幾個“ sub” div。 但是現在只有第一段具有“ sub”父div，所有其他克隆div具有“內部”父div。 我怎樣才能做到這一點？

 $("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

如果需要深層副本，則需要添加特定的參數.clone()有關更多信息，請參見.clone()文檔 ）：

 $("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> 

編輯

上面，我刪除了.html()以便將<div class="sub>添加到main div中，而不僅僅是inner div。