Методы перемещения и клонирования элементов

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


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

<div id="div1"> <b>Текст</b>
<а href ="11 .html">l</a><br>
<a  href="12 .html">2</a><br>

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

<div  id="div1">
<b>Текст</b><а href ="ll .html">1</а>
<а href ="12 .html">2</^>
<br> <br>

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

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

<div id="div1">Текст</div><br>
<a href="11.html">l</a><br>
<a href = "12.html">2</a<br>

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

<а href="ll.html">l</a>
<a href ="12 .html">2</a>
<div id="div1">Текст</div><br><br><br>

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

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

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *