insertBefore()

Поддержка браузерами

Описание

Метод insertBefore() добавляет узел (element) в список дочерних элементов указанного родителя перед указанным узлом (element). Если элемент уже присутствует на странице, тогда insertBefore() удаляет элемент с его текущей позиции и перемещает на новую – перед указанным узлом (element) указанного родителя.

Синтаксис

element.insertBefore(newElement, referenceElement);

Аргументы

newElement: элемент, который будет добавлен в список дочерних элементов указанного родителя перед указанным узлом (element).
referenceElement: null или узел (element), перед которым будет вставлен newElement.

Если указано значение null, newElement будет добавлен в конец списка дочерних элементов указанного родителя.

Возвращаемое значение

Возвращает ссылку на добавленный узел (element).

Пример

<button id="test">Добавить абзац!</button>
<div>
  <p id="child">Существующий абзац.</p>
</div>

<script>
  var button = document.querySelector("#test");
  button.addEventListener("click", foo, false);
  var i = 1;
  var div = document.querySelector("div");

  function foo() {
    var p = document.createElement("p");
    var child = document.querySelector("#child");
    p.innerHTML = "Добавлен " + i + "-й абзац.";
    div.insertBefore(p, child);
    i++;
  }
</script>