Версия для печати. Взято с сайта phpsql.ru

На главную   Назад   Вперед

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

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

$("ttdivl").append($("а"));
<div id="divl">
<b>Текст</b>
</div>
<а href ="11.html">l</a><br> 
<a href ="12 . html  >2</a><br>

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

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

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

$("а").insertBefore($("#divl") ) ;
<div id="divl">
TeKCT</div>
<br>
<a href = "11 .html">l</axbr> 
<a href = "12 . html" >2</a><br>

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

<а href ="11 .html">l</a><a href =" 12 .html">2</a>
<div id="divl">TeKCT</div>
<br><br><br>

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

<a href="link.html">Ссылка</а> 
<div id="divl">TeKCT</div>
Результат будет выглядеть следующим образом. 
<а href="link.html">Ссылка</а>
<div id="divl">TeKCT</div><a href ="link.html">Ссылка</а>

 
Предыдущая   На главную   Следующая