Перемещение элементов

Если в качестве параметра методов before(), prepend(), append() и after() указать коллекцию существующих элементов jQuery, то они будут перемещены. Куда будут вставлены элементы, зависит от конкретного метода: before() (перед элементом), prepend() (в начало содержимого), append() (в конец содержимого), after() (после элемента). Для примера найдем все ссылки на странице и добавим их в конец элемента с идентификатором div1:

<div id="div1">
   <b>Текст</b>
</div>
<a href="l1.html">1</a><br>
<a href="l2.html">2</a>

$('#div1').append( $('a') );

В результате все ссылки будут перемещены в конец содержимого элемента с идентификатором div1, и мы получим следующий HTML-код:

<div id="div1">
   <b>Текст</b>
<a href="l1.html">1</a><a href="l2.html">2</a></div>
<br>

Такого же эффекта можно достичь при помощи методов insertBefore(), prependTo(), appendTo() и insertAfter(). Куда будут вставлены элементы, зависит от конкретного метода: insertBefore() (перед элементом), prependTo() (в начало содержимого), appendTo() (в конец содержимого), insertAfter() (после элемента). Для примера найдем все ссылки на странице и добавим их перед элементом с идентификатором div1:

<div id="div1">
   <b>Текст</b>
</div>
<a href="l1.html">1</a><br>
<a href="l2.html">2</a>

$('a').insertBefore( $('#div1') );

В результате все ссылки будут размещены непосредственно перед элементом с идентификатором div1, и мы получим следующий HTML-код:

<a href="l1.html">1</a><a href="l2.html">2</a><div id="div1">
   <b>Текст</b>
</div>
<br>

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

Библиотека jQuery позволяет создавать копии существующих элементов (клонировать). Для этого предназначен метод clone([true[, true]]). Если в качестве первого параметра указано значение true, то дополнительно будут клонированы обработчики событий и данные. Если в качестве второго параметра указано значение true, то будут также клонированы обработчики событий и данные для дочерних элементов (глубокое копирование). Создадим копию первой ссылки в документе, а затем выведем ее после элемента с идентификатором div1:

<a href="link.html">Ссылка</a>
<div id="div1">Текст</div>

$('a').eq(0).clone().insertAfter('#div1');

Результат будет выглядеть следующим образом:

<a href="link.html">Ссылка</a>
<div id="div1">Текст</div><a href="link.html">Ссылка</a>

Учебник по jQuery и AJAX в формате PDF