На этом шаге мы рассмотрим методы, используемые для копирования элементов.
До сих пор мы вставляли в документ вновь созданные элементы, перемещали элементы из одного места в другое и обертывали существующие элементы новыми. Однако иногда бывает необходимо копировать элементы. Например, меню навигации, присутствующее в заголовке страницы, может потребоваться скопировать в нижнюю часть страницы. В действительности всякий раз, когда предоставляется возможность скопировать элементы для визуального увеличения страницы, очень удобно применять сценарий JavaScript.
Для копирования элементов библиотека jQuery предоставляет метод .clone(). Он принимает произвольный набор элементов и создает его копию для последующего использования. Как и при создании новых элементов, рассмотреном на предыдущих шагах, скопированные элементы не появятся в странице, пока мы не применим к ним один из методов вставки. Например, следующая строка создает копию первого параграфа, находящегося внутри элемента <div class="chapter">:
$('div.chapter p:eq(0)').clone();
После выполнения этой строки содержимое страницы еще не изменится.
Продолжим пример и заставим скопированный параграф появиться перед элементом <div class="chapter">:
$('div.chapter p:eq(0)').clone().insertBefore('div.chapter');
Теперь первый параграф отображается в странице дважды, а, поскольку первый из них находится за пределами элемента <div class="chapter">, к нему не применяется оформление, ассоциированное с элементом div (особенно это заметно при сравнении их ширин), как показано на рисунке 1.
Рис.1. Скопированный параграф оформлен иначе
Полный текст этого примера можно взять здесь.Цепочка из метода .clone() и метода добавления аналогична операции копирования и вставки.
На следующем шаге мы рассмотрим копирование с обработчиками событий.
