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

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

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

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

Теперь добавим DOM-элемент.

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

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

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

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

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

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

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