Как клонировать родительский элемент со всеми подэлементами в jQuery?

Question

У меня есть следующий код для добавления нового абзаца, когда я нажимаю на кнопку.Я клонирую "sub" div и добавляю его в "main" div.Но при клонировании «sub» div он копирует только содержимое «sub» div, которое является «внутренним» 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() документы для более подробной информации):

$("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> будет добавлен к div main, а не только кinner Див.