Метод insertBefore() элемента HTML DOM Element

Определение и использование

insertBefore() Метод вставляет узел перед существующим подузлом.

Дополнительная информация:

Метод appendChild()

Метод replaceChild()

Метод removeChild()

Метод remove()

Атрибут childNodes

Атрибут firstChild

Атрибут lastChild

Атрибут firstElementChild

Атрибут lastElementChild

Пример

Пример 1

  1. Создать элемент <li>
  2. Создать узел текста
  3. Добавить текст к элементу <li>
  4. Вставить элемент <li> перед первым подэлементом <ul>;
const newNode = document.createElement("li");
const textNode = document.createTextNode("Water");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

Попробуйте сами

Пример 2

Перемещение последнего элемента из одного списка в начало другого списка:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, list.children[0]);

Попробуйте сами

Пример 3

Перемещение последнего элемента из одного списка в конец другого списка:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, null);

Попробуйте сами

Синтаксис

element.insertBefore(newnode, existingnode)

или

node.insertBefore(newnode, existingnode)

Параметр

Параметр Описание
newnode Обязателен. Узел, который нужно вставить (элемент).
existingnode

Опционально. Вставляет новый узел перед существующим узлом.

Если не указано, то метод insertBefore вставляет newnode в конец.

Возвратное значение

Тип Описание
Узел Вставленный узел.

Поддержка браузеров

element.insertBefore() Это функция DOM Level 1 (1998).

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

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка