Node.insertBefore()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Синтаксис

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

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

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

Пример

html
<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.

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

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

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

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

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

Specification
DOM
# dom-node-insertbefore

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
insertBefore

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support