Метод insertBefore в JavaScript

Метод insertBefore позволяет вставить элемент перед другим элементом. Чаще всего используется после создания элемента с помощью createElement. Метод применяется к родителю того элемента, перед которым произойдет вставка.

Синтаксис

родитель.insertBefore(элемент, перед кем вставить)

Пример

Создадим абзац и поместим его перед вторым абзацем:

<div id="parent">
<p>elem 1</p>
<p id="before">elem 2</p>
<p>elem 3</p>
</div>
let parent = document.querySelector('#parent');
let before = document.querySelector('#before');
let p = document.createElement('p');
p.innerHTML = '!';
parent.insertBefore(p, before);
// <div id="parent">
// <p>elem 1</p>
// <p>!</p>
// <p>elem 2</p>
// <p>elem 3</p>
// </div>

Пример

Добавим абзац в начало элемента #parent. Для этого вставим наш абзац перед первым потомком #parent. Этого потомка можно найти с помощью firstElementChild:

<div id="parent">
<p>elem 1</p>
<p>elem 2</p>
</div>
let parent = document.querySelector('#parent');
let p = document.createElement('p');
p.innerHTML = '!';
parent.insertBefore(p, parent.firstElementChild);
// <div id="parent">
// <p>!</p>
// <p>elem 1</p>
// <p>elem 2</p>
// </div>

Пример

При передаче вторым параметром null метод insertBefore срабатывает как appendChild. В то же время, если в элементе нет дочерних элементов, firstElementChild возвращает null. Следовательно, добавлять в начало элемента можно даже тогда, когда в нем нет дочерних элементов:

<div id="parent"></div>
let parent = document.querySelector('#parent');
let p = document.createElement('p');
p.innerHTML = '!';
parent.insertBefore(p, parent.firstChild);
// <div id="parent">
// <p>!</p>
// </div>