.after()

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

Используя следующий HTML:

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

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

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

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

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

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

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

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

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

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

Передача функции

С версии jQuery 1.4 .after() поддерживает передачу функции, которая возвращает вставляемые элементы.

$( "p" ).after(function() {
  return "<div>" + this.className + "</div>";
});

В этом примере вставляется <div> после каждого абзаца, при этом каждый новый <div> содержит имя(а) класса предшествующего абзаца.

Дополнительные аргументы

Аналогично другим методам добавления содержимого, таким как .prepend() и .before(), .after() также поддерживает передачу нескольких аргументов в качестве входных данных. Поддерживаемые входные данные включают DOM-элементы, объекты jQuery, строки HTML и массивы DOM-элементов.

Например, следующее вставит два новых <div> и существующий <div> после первого абзаца:

var $newdiv1 = $( "<div id='object1'></div>" ),
  newdiv2 = document.createElement( "div" ),
  existingdiv1 = document.getElementById( "foo" );
 
$( "p" ).first().after( $newdiv1, [ newdiv2, existingdiv1 ] );

Поскольку .after() может принимать любое количество дополнительных аргументов, тот же результат можно получить, передав три <div> в качестве трех отдельных аргументов, как показано ниже: $( "p" ).first().after( $newdiv1, newdiv2, existingdiv1 ). Тип и количество аргументов в основном зависят от элементов, собранных в коде.

• До jQuery 1.9, .after() пытался добавить или изменить узлы в текущем наборе jQuery, если первый узел в наборе не был подключен к документу, и в этих случаях возвращал новый набор jQuery, а не исходный. Метод мог или не мог вернуть новый результат в зависимости от количества или подключенности его аргументов! Начиная с jQuery 1.9, .after(), .before(), и .replaceWith() всегда возвращают исходный неизмененный набор. Попытка использовать эти методы на узле без родителя не имеет эффекта — то есть ни набор, ни узлы, которые он содержит, не изменяются.
• По умолчанию любой конструктор или метод jQuery, принимающий строку HTML — jQuery(), .append(), .after() и т.д. — может потенциально выполнить код. Это может произойти путем вставки тегов script или использования атрибутов HTML, которые выполняют код (например, <img onload="">). Не используйте эти методы для вставки строк, полученных из ненадежных источников, таких как параметры запроса URL, куки или данные форм. Это может привести к уязвимостям типа межсайтового скриптинга (XSS). Удалите или экранируйте любой пользовательский ввод перед добавлением содержимого в документ.