Оглавление

5.2. Добавление содержимого перед элементом или после него

В предыдущем разделе мы рассмотрели изменение внутреннего содержимого элемента. Библиотека jQuery предоставляет также методы, которые позволяют добавить какое-либо содержимое перед элементом или после него. Рассмотрим эти методы.

 

after(<Выражение>) — добавляет <Выражение> после всех элементов коллекции. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Для примера добавим HTML-код после элемента.
   $("#div1").after("<u>Новый текст</u>");

   <div id="div1">Текст</div>  
Результат будет выглядеть следующим образом..
   <div id="div1">

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

   </div>

   <u>Новый текст</u>
Теперь добавим DOM-элемент.

   $("#div1").after($("<u>Новый текст</u>").get (0));  

А теперь добавим созданный элемент коллекции jQuery.

   $("#div1").after($("<u>Новый текст</u>"));

 

before(<Выражение>)— добавляет <Выражение> перед всеми элементами коллекции. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Метод полностью идентичен методу after(), за исключением того, что добавляет <Выражение> не после элемента, а перед ним. Для примера добавим HTML-код перед элементом.

    $("#div1").before("<u>Новый текст</u>");

    <div id="div1">Текст</div>  

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

    <u>Новый текст</u>

   <div id="div1">

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

   </div>

 

insertAfter(<Селектор>) — добавляет коллекцию элементов jQuery после всех элементов, соответствующих указанному селектору. Для примера добавим HTML-код после элемента с идентификатором divl.

   $("<u>Новый текст</u>").insertAfter("#div1");

Результат будет таким же, как и при использовании метода after () .
   $("#div1").after("<u>Новый текст</u>");

 
insertBefore(<Селектор>) — добавляет коллекцию элементов jQuery перед всеми элементами, соответствующими указанному селектору. Для примера добавим HTML-код перед элементом с идентификатором div1.

   $("<u>Новый текст</u>").insertBefore("#div1");
Результат будет таким же, как и при использовании метода before().
   $("#div1").before("<u>Новый текст</u>");

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