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

См. также метод appendChild, который вставляет элементы в конец родителя.

См. также метод insertAdjacentHTML, который вставляет элементы в заданное место.

См. также метод removeChild, который удаляет элементы.

Синтаксис

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

В данном случае родитель - это родитель того элемента, перед которым произойдет вставка.

Примеры

Пример

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

<div id="parent">
	<p>Абзац 1</p>
	<p id="before">Абзац 2</p>
	<p>Абзац 3</p>
</div>
var parent = document.getElementById('parent');
var before = document.getElementById('before');

var p = document.createElement('p');
p.innerHTML = 'Новый абзац';

parent.insertBefore(p, before);

HTML код элемента станет выглядеть так:

<div id="parent">
	<p>Абзац 1</p>
	<p>Новый абзац</p>
	<p>Абзац 2</p>
	<p>Абзац 3</p>
</div>

Пример

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

<div id="parent">
	<p>Абзац 1</p>
	<p>Абзац 2</p>
</div>
var parent = document.getElementById('parent');

var p = document.createElement('p');
p.innerHTML = 'Новый абзац';

parent.insertBefore(p, parent.firstElementChild);

HTML код элемента станет выглядеть так:

<div id="parent">
	<p>Новый абзац</p>
	<p>Абзац 1</p>
	<p>Абзац 2</p>
</div>

Пример

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

<div id="parent"></div>
var parent = document.getElementById('parent');

var p = document.createElement('p');
p.innerHTML = 'Новый абзац';

parent.insertBefore(p, parent.firstChild);

HTML код элемента станет выглядеть так:

<div id="parent">
	<p>Новый абзац</p>
</div>