jQuery метод .after()

Определение и применение

jQuery метод .after() вставляет указанное содержимое, переданное в параметре метода после каждого выбранного элемента.

jQuery синтаксис:

Синтаксис 1.0

JavaScript

$( selector ).after( content )
$( selector ).after( content, [content, content] ) // допускается передавать параметры не в массиве

content - htmlString, или Element, или Text, или Array, или jQuery (объект)

Синтаксис 1.10

Код

$( selector ).after( function( index, html ))

function - Function

index - Integer

html - String

Синтаксис 1.4

Код

$( selector ).after( function( index ))

function - Function

index - Integer

Методы .after() и .insertAfter() служат для выполнения одной и той же задачи. Основное различие между этими методами заключается в синтаксисе:

JavaScript

$( target ).after( content ) // использование метода .after()

$( content ).insertAfter( target ) // использование метода .insertAfter()

Обратите внимание, что метод .insertAfter() в отличии от метода .after() не позволяет вставить содержимое, перечисленное через запятую, или переданное в массиве.

Добавлен в версии jQuery

1.0 (синтаксис расширен в версиях 1.10 и 1.4)

Значения параметров

Параметр	Описание
content	Один или более дополнительных элементов DOM, текстовых узлов, массивы элементов и текстовых узлов, HTML строк, или jQuery объекты, которые будут вставлены после каждого элемента в наборе совпавших элементов.
`function`(index, html)	Функция, которая возвращает HTML строку, DOM элемент(ы), текстовый узел(ы), или jQuery объект, которые необходимо вставить после каждого элемента в наборе совпавших элементов. Получает индекс элемента в наборе и старое значение HTML элемента в качестве аргументов. Внутри функции `this` ссылается на текущий элемент в наборе.
`function`(index)	Функция, которая возвращает HTML строку, DOM элемент(ы), текстовый узел(ы), или jQuery объект, которые необходимо вставить после каждого элемента в наборе совпавших элементов. Получает индекс элемента в наборе в качестве аргумента. Внутри функции `this` ссылается на текущий элемент в наборе.

HTML и Trusted Types

В jQuery 4.0 операции вставки HTML поддерживают TrustedHTML. При CSP require-trusted-types-for 'script' создавайте разрешённое значение через политику приложения. jQuery не очищает HTML автоматически: для обычного пользовательского текста используйте .text().

Пример использования

Метод .after() — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<p>Первый абзац</p>
<p>Второй абзац</p>

main.js

JavaScript

$(document).ready(function () {
    $('p:first').after('<b>Hello world!</b>') // добавляем содержимое после первого элемента <p> в документе
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .after() мы добавляем после первого элемента <p> в документе текстовое содержимое, заключенное в элемент <b> (жирное начертание текста).

В следующем примере мы рассмотрим как передать методу .after() несколько параметров.

Метод .after() — пример 2

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<p>Первый абзац</p>
<p>Второй абзац</p>

main.js

JavaScript

$(document).ready(function () {
    var h3 = '<h3>Заголовок третьего уровня</h3>', // создаем две переменные
        hr = document.createElement('hr') // создаем элемент <hr> и помещаем в переменную
    $('p:first').after('<b>Hello world!</b>', ['<h2>Заголовок второго уровня</h2>', h3, hr]) // добавляем содержимое после первого элемента <p> в документе
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .after() мы добавляем после первого элемента <p> несколько различных элементов. Обращаю Ваше внимание, что метод .after() может принимать любое количество аргументов и следующая запись будет делать тоже самое, что и запись рассмотренная в примере:

JavaScript

$( "p:first" ).after( "<b>Hello world!</b>", "<h2>Заголовок второго уровня</h2>", h3, hr ); // допускается передавать параметры не в массиве

В следующем примере мы в качестве параметра метода .after() передадим jQuery объект.

Метод .after() — пример 4

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<ul>
  <li class="first">1</li>
  <li class="second">2</li>
  <li class="third">3</li>
</ul>

main.js

JavaScript

$(document).ready(function () {
    $('.first').after($('.third')) // перемещаем содержимое после элемента с классом .first
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .after() мы добавляем после элемента <li> с классом "first" элемент <li> с классом "third". Обратите внимание, что при этом элемент не клонируется, а перемещается.

В следующем примере мы в качестве параметра метода .after() передадим функцию.

Метод .after() — пример 5

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<p>Первый абзац</p>
<p>Второй абзац</p>

main.js

JavaScript

$(document).ready(function () {
    $('p:first').after(function (index, html) {
        return '<ul><li>Индекс элемента: ' + index + '</li><li>Содержимое элемента: ' + html + '</li></ul>'
    })
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .after() и функции, переданной в качестве параметра метода, мы выводим после каждого элемента <p> в документе маркированный список (<ul>), который содержит информацию о индексе элемента и его содержимом.