jQuery метод .insertAfter()

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

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

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

jQuery синтаксис:

$( content ).insertAfter( selector )

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

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

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

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

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

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

1.0

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

Параметр	Описание
content	Селектор, элемент(ы), HTML строка или объект jQuery, которые будут вставлены после каждого целевого элемента, переданного в параметре метода.

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

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

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

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

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

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

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

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

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

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

jQuery DOM методы