如何使用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() docs）

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