Клонирование элементов

.clone()

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

.clone([withDataAndEvents]):jQuery1.0

withDataAndEvents — определяет, необходимо ли копировать данные и обработчики событий, установленные на копируемых элементах. По умолчанию, этот параметр равен false.

.clone([withDataAndEvents],[deepWithDataAndEvents]):jQuery1.5

withDataAndEvents — аналогично версии выше, за исключением одного: в jQuery-1.5.0 значение этого параметра по умолчанию было ошибочно изменено на true. В jQuery-1.5.1 значение по умолчанию было установлено обратно в false.
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).

Ссылки

Поисковые ключи:
  • создание копии элементов
  • создать копию элемента
  • копирование элементов
  • клонирование элементов
  • .clone()
  • clone()