Node.insertBefore()

Метод Node.insertBefore() добавляет элемент в  список дочерних элементов родителя перед указанным элементом.

Синтаксис

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

В Mozilla Firefox, если referenceElement не задан или равен null, newElement вcтавляется в конец списка дочерних элеметнов. В IE, referenceElement равный undefined, сгенерируется исключение "Invalid argument", в то время как Chrome сгенерирует исключение  "Uncaught TypeError", ожидая 2 аргумента.

• insertedElement Вставленный элемент.
• parentElement Родитель для нового элемента.
• newElement Элемент для вставки.
• referenceElement Элемент, перед которым будет вставлен newElement.

Пример

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>

<script>
// Создаем новый <span>
var sp1 = document.createElement("span");

// Получаем ссылку на элемент, перед которым мы хотим вставить sp1
var sp2 = document.getElementById("childElement");
//Получаем ссылку на родителя sp2
var parentDiv = sp2.parentNode;

// Вставляем sp1 перед sp2
parentDiv.insertBefore(sp1, sp2);
</script>

Однако нет метода insertAfter. Он может быть заменен использованием метода insertBefore в связке с nextSibling.

В предыдущем примере sp1 может быть вставлен после sp2 следующим образом:

parentDiv.insertBefore(sp1, sp2.nextSibling);

Если sp2 не имеет следующего элемента, то он будет последним дочерним элементом,  sp2.nextSibling вернет null, а sp1 вставится в конец дочернего узла (сразу после sp2).

Пример 2

Вставка элемента перед первым дочерним элементом с помощью firstChild.

// Получаем ссылку на элемент в который мы хотим добавить новый элемент
var parentElement = document.getElementById('parentElement');
// Получаем ссылку на первый дочерний элемент
var theFirstChild = parentElement.firstChild;

// Создаем новый элемент, который будем добавлять
var newElement = document.createElement("div");

// Вставляем новый элемент перед первым дочерним элементом
parentElement.insertBefore(newElement, theFirstChild);

Когда у родителя нет первого дочернего элемента, firstChild вернет null. Новый элемент все равно будет втавляться после последнего дочернего элемента. Но так как родитель не имеет первого дочернего элемета, то он не будет иметь и последнего. Следовательно, после добавления в него элемента, этот элемент будет единственным дочерним элементом.

Совместимость с браузерами

Спецификация

• insertBefore