Метод добавления содержимого перед элементом или после него

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


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

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

<div  id="div1">Текст</div>
Результат будет выглядеть следующим образом..
<div  id="div1">Текст</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>Новый Текст</uxdiv id="div1">Текст</div>

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

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

Результат будет таким же, как и при использовании метода after ().

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

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

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

Результат будет таким же, как и при использовании метода before ().

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

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

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