.insertAfter()

.insertAfter( target )Возвращает: jQuery

Описание: Вставляет каждый элемент из набора совпавших элементов после целевого.

версия добавлена: 1.0.insertAfter( target )
- target
  
  Тип: Селектор или строка HTML или элемент или массив или jQuery
  
  Селектор, элемент, массив элементов, строка HTML или объект jQuery; совпавший набор элементов будет вставлен после указанного элемента(ов) этим параметром.

Методы .after() и .insertAfter() выполняют одну и ту же задачу. Основное различие заключается в синтаксисе — конкретно, в расположении содержимого и целевого элемента. С помощью .after(), выражение селектора, предшествующее методу, является контейнером, после которого вставляется содержимое. С помощью .insertAfter(), наоборот, содержимое предшествует методу, как выражение селектора или как создаваемый на лету разметка, и оно вставляется после целевого контейнера.

Рассмотрим следующий HTML:

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

Мы можем создать содержимое и вставить его после нескольких элементов сразу:

$( "<p>Test</p>" ).insertAfter( ".inner" );

Каждый внутренний элемент <div> получает это новое содержимое:

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

Мы также можем выбрать элемент на странице и вставить его после другого:

$( "h2" ).insertAfter( $( ".container" ) );

Если выбранный таким образом элемент вставляется в одно место в другом месте DOM, он будет перемещён после целевого (не клонирован), и возвращается новый набор, состоящий из вставленного элемента:

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>

Однако, если есть более одного целевого элемента, будут созданы клоны вставленного элемента для каждого целевого элемента после первого, и возвращается этот новый набор (исходный элемент плюс клоны).

До jQuery 1.9 случай вставки в единственный элемент не создавал новый набор, а вместо этого возвращал исходный набор, что затрудняло надёжное использование метода .end() при работе с неизвестным числом элементов.

Дополнительные заметки:

По умолчанию любой конструктор или метод jQuery, принимающий строку HTML — jQuery(), .append(), .after() и т.д. — может потенциально выполнить код. Это может произойти при вставке тегов сценариев или использовании атрибутов HTML, которые выполняют код (например, <img onload="">). Не используйте эти методы для вставки строк, полученных из ненадежных источников, таких как параметры запроса URL, куки или данные форм. Это может привести к уязвимостям XSS (межсайтовый скриптинг). Удалите или экранируйте любой пользовательский ввод перед добавлением содержимого в документ.
jQuery официально не поддерживает SVG. Использование методов jQuery в документах SVG, если для данного метода это не задокументировано, может привести к неожиданному поведению. Примеры методов, поддерживающих SVG с jQuery 3.0, это addClass и removeClass.

Пример:

Вставка всех абзацев после элемента с id "foo". То же самое, что $( "#foo" ).after( "p" )

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>insertAfter demo</title>
  <style>
  #foo {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p> is what I said... </p>
<div id="foo">FOO!</div>
 
<script>
$( "p" ).insertAfter( "#foo" );
</script>
 
</body>
</html>

.insertAfter( target )Возвращает: jQuery

версия добавлена: 1.0.insertAfter( target )

Дополнительные заметки:

Пример:

Демо: