Клонирование элементов. Создание копий элементов с новыми id и class в JQuery

Мне давно необходима была функция, которая позволила бы скопировать существующий код, но назначить на новую копии свои id или class или даже name. Все это можно сделать с помощью функций .clone().

.clone() - Создает копии выбранных элементов страницы и возвращает их в виде объекта JQuery. Элементы копируются вместе со всеми содержащимися внутри них элементами.

.clone([withDataAndEvents],[deepWithDataAndEvents]) - идет с версии  JQuery 1.5
withDataAndEvents — аналогично версии выше.
deepWithDataAndEvents — определяет, нужно ли копировать данные и обработчики установленные на дочерних элементах клонируемого элемента. По умолчанию, принимает значение первого параметра.

Примеры

Допустим, на странице содержится следующий код:
<div class="container">
<div class="hello">Привет</div>
<div class="goodbye">Пока</div>
</div>
Если мы будем использовать метод append() для того, чтобы вставить элемент с классом hello в конец div'а с классом container, то как известно, append "вырежет" элемент из прошлого места, и вставит в новое. То есть, код:

$(".hello").appendTo(".container");
сделает наш html-код таким:
<div class="container">
<div class="goodbye">Пока</div>
<div class="hello">Привет</div>
</div>

Если же нам необходимо не переместить элемент, а скопировать, можно воспользоваться методом clone: $(".hello").clone().appendTo(".container");

В этом случае, перемещен будет клон элемента с классом hello, а значит оригинал никуда не денется:
<div class="container">
<div class="hello">Привет</div>
<div class="goodbye">Пока</div>
<div class="hello">Привет</div>
</div>

Сразу после клонирования, новые элементы существуют только локально, отдельно от страницы. Однако, даже в этот момент, над ними можно совершать такие же манипуляции, как и с элементами, которые находятся на странице. Например, относительно предыдущего примера можно сделать следующее:

$(".hello").clone() // сделаем копию элемента hello
.addClass("newElement") // добавим этой копии класс newElement
.text("И снова здравствуйте!") // изменим текст внутри нее
.appendTo(".container"); // вставим измененный элемент в конец элемента container

В результате, страница станет такой:
<div class="container">
<div class="hello">Привет</div>
<div class="goodbye">Пока</div>
<div class="hello newElement">И снова здравствуйте!</div>
</div>

Параметры метода
По умолчанию, копии элементов не будут содержать обработчиков событий и данных, которыми обладали оригиналы. Если вам необходимо сделать копии, которые бы содержали эти атрибуты, задайте параметр withDataAndEvents со значением true. Однако в случае, если данные представлены массивом или объектом, то при копировании произойдет копирование не самих массивов или объектов, а ссылок на них. То есть за оригиналом и копией элементов будут закреплены общие данные. Чтобы избежать этого необходимо переписать данные, представленные массивами или объектами самостоятельно:

var $elem = $('#elem').data( "arr":[1] ), // оригинал элемента с закрепленным за ним массивом
$clone = $elem.clone(true) // создадим копию элемента
.data("arr", $.extend( [], $elem.data("arr") )); // и самостоятельно перепишем в нем arr

В случае, если необходимо, чтобы сами элементы были скопированы вместе с данными и обработчиками, а лежащие внутри них элементы - не обязательно, то для экономии компьютерных ресурсов можно указать второй параметр со значением false (этот параметр доступен начиная с jquery-1.5).

Скачать пример клонирования элементов на JQuery вы можете ниже