Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Перемещение и клонирование элементов
Если в качестве параметра методов 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>
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF
Помощь сайту
Yandex-деньги: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов