Оглавление

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

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

 

    <div id="divl">

      <b>Текст</b>

   </div>  

   <a href="l1.html">l</a><br>  

   <a href="l2.html">2</a><br>

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

 

    <div id="divl">  

      <b>Текст</b>  

      <a href="l1.html">l</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">l</a><br>

   <a href="l2.html">2</a><br>


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

     <a href="l1.html">l</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>

6
<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити