insertBefore()

Обновлено: 19.03.2023

Визначення та використання

Метод insertBefore()вставляє дочірній вузол перед існуючим дочірнім.

Приклади

  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]);

Перемістіть останній елемент з одного списку на початок іншого:

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

Перемістіть останній елемент з одного списку в кінець іншого:

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

Синтаксис


element.insertBefore(new, existing)

або

node.insertBefore(new, existing)

Параметри

ПараметрОпис
newВимагається. Вузол (елемент), який потрібно вставити.
existingВимагається. Вузол (елемент), який потрібно вставити раніше. Якщо значення null, воно буде вставлено в кінці.

Повернене значення

Типопис
ВузолВставлений вузол.


Підтримка браузера

insertBefore

Посмотреть совместимость на Can I use?

insertBefore