jQuery метод .insertBefore()

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

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

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

jQuery синтаксис:

$( content ).insertBefore( selector )

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

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

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

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

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

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

1.0

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования jQuery метода .insertBefore() (добавление элемента)</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>" ).insertBefore( "p:first" ); // добавляем содержимое перед первым элементом <p> в документе
	});
		</script>
	</head>
	<body>
		<p>Первый абзац</p>
		<p>Второй абзац</p>
	</body>
</html>

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

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

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

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

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

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

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

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

jQuery DOM методы