jQuery метод .insertAfter()

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

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

jQuery синтаксис:

$( content ).insertAfter( selector )

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

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

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

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

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

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

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

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

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

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

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

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

В следующем примере мы в качестве содержимого передадим методу .insertAfter() селектор.

<h2>Заголовок второго уровня</h2>
<hr />
<p>Первый абзац</p>
<p>Второй абзац</p>

$(document).ready(function () {
    $('h2').insertAfter('p') // перемещаем и добавляем  элемент <h2> после каждого элемента <p> в документе.
})

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

В этом примере с использованием jQuery метода .insertAfter() мы перемещаем и добавляем элемент <h2> после каждого элемента <p> в документе.