jQuery метод .after()

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

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

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

jQuery синтаксис:

Синтаксис 1.0
$( 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() служат для выполнения одной и той же задачи. Основное различие между этими методами заключается в синтаксисе:

$( 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 ссылается на текущий элемент в наборе.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .after() (добавление элемента)</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "p:first" ).after( "<b>Hello world!</b>" ); // добавляем содержимое после первого элемента <p> в документе
	});
		</script>
	</head>
	<body>
		<p>Первый абзац</p>
		<p>Второй абзац</p>
	</body>
</html>

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

Результат нашего примера:

Пример использования jQuery метода .after() (добавление элемента)

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .after() (добавление нескольких элементов)</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  var h3 ="<h3>Заголовок третьего уровня</h3>", // создаем две переменные
	      hr = document.createElement( "hr" ); // создаем элемент <hr> и помещаем в переменную
	  $( "p:first" ).after( "<b>Hello world!</b>", ["<h2>Заголовок второго уровня</h2>", h3, hr] ); // добавляем содержимое после первого элемента <p> в документе
	});
		</script>
	</head>
	<body>
		<p>Первый абзац</p>
		<p>Второй абзац</p>
	</body>
</html>

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

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

Результат нашего примера:

Пример использования jQuery метода .after() (добавление нескольких элементов)

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .after() (передача jQuery объекта)</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$(document).ready(function(){
	  $( ".first" ).after( $( ".third" ) ); // перемещаем содержимое после элемента с классом .first
	});
		</script>
	</head>
	<body>
		<ul>
			<li class = "first">1</p>
			<li class = "second">2</p>
			<li class = "third">3</p>
		</ul>
	</body>
</html>

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

Результат нашего примера:

Пример использования jQuery метода .after() (передача jQuery объекта)

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .after() (использование функции)</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "p:first" ).after(function( index, html ){
            return "<ul><li>Индекс элемента: " + index + "</li><li>Содержимое элемента: " + html + "</li></ul>";
	  });
	});
		</script>
	</head>
	<body>
		<p>Первый абзац</p>
		<p>Второй абзац</p>
	</body>
</html>

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

Результат нашего примера:

Пример использования jQuery метода .after() (использование функции)

jQuery DOM методы