Метод insertBefore()
Примеры element.insertBefore()
- Создайте элемент <li>
- Создайте текстовый узел
- Добавьте текст к элементу <li>
- Вставьте элемент <li> перед первым дочерним элементом в <ul>:
const newNode = document.createElement("li");
const textNode = document.createTextNode("Вода");
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);
Попробуйте сами »
Описание insertBefore()
Метод insertBefore() вставляет дочерний узел перед существующим дочерним узлом.
Связные страницы insertBefore()
Синтаксис insertBefore()
element.insertBefore(new, existing)
или
node.insertBefore(new, existing)
Параметры insertBefore()
| Параметр | Описание |
|---|---|
| new | Обязательно. Узел (элемент) для вставки. |
| existing | Обязательно. Узел (элемент), перед которым нужно вставить. Если null, он будет вставлен в конец. |
Возвращаемое значение insertBefore()
| Тип | Описание |
|---|---|
| Node | Вставленный узел. |
Поддержка insertBefore()
element.insertBefore() является функцией DOM уровня 1 (1998).
Он полностью поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 9-11 |