# Метод insertBefore

Метод `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.textContent = '!'; 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.textContent = '!'; 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.textContent = '!'; parent.insertBefore(p, parent.firstChild);`

Результат выполнения кода:

`<div id="parent"> <p>!</p> </div>`

## Смотрите также

- метод `prepend`,
  который вставляет элементы в начало
- метод `appendChild`,
  который вставляет элементы в конец родителя
- метод `insertAdjacentElement`,
  который вставляет элемент в заданное место
- метод `insertAdjacentHTML`,
  который вставляет теги в заданное место

← →
↑
en ru