Метод
.clone() выполняет полное копирование набора соответствующих элементов, это означает, что он копирует соответствующие элементы, а также всех потомков этих элементов и текстовые узлы. При использовании в сочетании с одним из методов вставки,
.clone() это удобный способ дублировать элементы на странице. Рассмотрим следующий HTML:
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
Как правило, когда мы вставляем элемент в DOM с помощью метода
$.appendTo(), то он перемещяется со старого места. Так что, учитывая код:
$('.hello').appendTo('.goodbye');
В результате мы получим такую DOM-структуру:
<div class="container">
<div class="goodbye">
Goodbye
<div class="hello">Hello</div>
</div>
</div>
Чтобы предотвратить это, и вместо перемещения элемента создать его копию и работать с ней, мы могли бы написать следующее:
$('.hello').clone().appendTo('.goodbye');
В результате получим такой DOM:
<div class="container">
<div class="hello">Hello</div>
<div class="goodbye">
Goodbye
<div class="hello">Hello</div>
</div>
</div>
Обратите внимание, что когда мы используем метод
.clone(), мы можем изменить клонированные элементы или их содержание до (пере-)вставки их в документ, это добавляет немало гибкости и доставляет удовольствие