jQuery метод .insertBefore()

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

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

jQuery синтаксис:

$( content ).insertBefore( selector )

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

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

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

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

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

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

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

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

Метод .insertBefore() — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<p>Первый абзац</p>
<p>Второй абзац</p>

main.js

JavaScript

$(document).ready(function () {
    $('<b>Hello world!</b>').insertBefore('p:first') // добавляем содержимое перед первым элементом <p> в документе
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

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

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

Метод .insertBefore() — пример 2

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<h2>Заголовок второго уровня</h2>
<hr />
<p>Первый абзац</p>
<p>Второй абзац</p>

main.js

JavaScript

$(document).ready(function () {
    $('h2').insertBefore('p') // перемещаем и добавляем  элемент <h2> перед каждым элементом <p> в документе.
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

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