Для чего используется .insertBefore() в jQuery?

Перемещает элементы набора jQuery, вставляя их перед элементами, определяемыми с помощью входного параметра.

.insertBefore() в jQuery

Категории: Manipulation › DOM Insertion, Outside

Перемещает элементы набора jQuery, вставляя их перед элементами, определяемыми с помощью входного параметра.

Добавлено в jQuery 1.0.insertBefore( target )
Метод .insertBefore() вставляет каждый элемент набора jQuery перед указанной целью target. По записи он противоположен методу .before(): у .before() первым указывается то, что остаётся на месте, а вставляемое содержимое передаётся аргументом; у .insertBefore() наоборот — набор, который перемещается, стоит перед вызовом метода, а цель передаётся аргументом. Итоговый DOM в обоих случаях получается одинаковым.
target может быть селектором, HTML-строкой, DOM-элементом, массивом элементов или объектом jQuery.

Возвращаемое значение: (объект) Набор jQuery — исходные (перемещённые) или клонированные элементы на новом месте.

target – (строка | элемент | массив | объект jQuery) место, перед которым вставляются элементы набора.

Примечание:
Если target соответствует одному месту в документе, элементы набора физически перемещаются туда, а не клонируются, — если элемент уже был где-то в DOM, оттуда он исчезнет.
Примечание:
Если target соответствует нескольким элементам, перед последним из них вставляется сам оригинал, а перед остальными — его клоны (как .clone(true), вместе с данными и обработчиками); возвращённый набор включает оригинал и все клоны.
В jQuery 3.x и 4.0:
Метод не менялся, работает без изменений в 3.7.1 и 4.0. Нативный аналог для одной цели — target.before(node) (Element.before(), поддерживается всеми современными браузерами), но он не клонирует узел автоматически при нескольких целях — это придётся делать вручную через node.cloneNode(true).

Переместить существующий блок сразу перед подвалом страницы.
```
$('#newsletter-form').insertBefore('#page-footer');
```
Вставить новый элемент перед каждым элементом, подходящим под селектор (клонирование).
```
$('<hr class="divider">').insertBefore('.section');
```

Нативный аналог для одной цели.

var form = document.querySelector('#newsletter-form');
document.querySelector('#page-footer').before(form);