jQuery. Перемещение и клонирование элементов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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