Клонирование (копирование) элементов .clone() в jQuery

Когда я только начинал изучать jQuery, то для меня было чудом функции .appendTo() и им подобные, которые позволяли перемещать одни html элементы в другие.

Но позже появилась необходимость их полного дублирования, а затем дублирования и изменения на лету некоторых свойств, например, класса или стиля нового элемента. Рассмотрим функцию .clone(), которая позволит реализовать эту функцию.

Кстати, про .appendTo() я подробно писал здесь, если вы про них не знаете, то советую прочитать.

.clone() – создает полную копию элемента. Работает только совместно с методами appendTo(), prependTo(),insertAfter и т.п.

Думаю, легко понять работу .clone() можно на живых примерах.

Пример: Клонирует .clones внутрь .zdes
<div class=”zdes”></div>
<label class=”clones” style=”cursor: pointer”>Клонировать меня</label>
<script>$(“.clones”).clone().appendTo(“.zdes”);</script>

Пример: Копирование элемента и изменение его данных
$(“.hello”).clone().addClass(“newElement”).text(“И снова здравствуйте!”).appendTo(“.container”);

Здесь мы сделаем копию элемента hello, добавим этой копии класс newElement, изменим текст внутри нее, вставим измененный элемент в конец элемента .container

И вот, пожалуй, самый интересный пример. В свое время и ломал голову, как его сделать. Данный код позволяет копировать div c #name внутрь .forma, причем каждый новый #name будет с уникальным id: #name1, #name2, #name3 и т.д.

<div class=”add”>Добавить</div>
<div class=”forma”>
<div id=”name” req=’true’>Ваше имя: <input type=”text” value=”Клонировать” /></div>
</div>
<script>
$(“.add”).click(function(){
var links = $(“[req=’true’]”).length;
$(“#name”).clone().attr(‘id’, ‘name’ + links).appendTo(“.forma”);
});
</script>

Работает так: нажали на кнопку клонировать .add, затем var links вычисляет количество элементов с req=’true’ и клонируем с новым id элемент в .forma.

Напоследок стоит добавить о дополнительных параметрах, которые являются необязательными:

.clone([withDataAndEvents],[deepWithDataAndEvents])

withDataAndEvents – true/false – нужно ли копировать вместе с элементом все события назначенные на его исходник и данные. По умолчанию false.

deepWithDataAndEvents – тоже самое, только речь идет о дочерних элементах клонируемого исходника. По умолчанию берет значение первого параметра.