HTML DOM метод insertBefore()
Пример
Вставьте новый элемент <li> перед первым дочерним элементом элемента <ul>:
var newItem = document.createElement("LI"); // Create a <li> node
var textnode = document.createTextNode("Water"); // Create a text node
newItem.appendChild(textnode); // Append the text to <li>
var list = document.getElementById("myList"); // Get the <ul> element to insert a new node
list.insertBefore(newItem, list.childNodes[0]); // Insert <li> before the first child of <ul>
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Метод insertBefore() вставляет дочерний узел прямо перед существующим дочерним элементом, который вы укажете.
Совет: Если вы хотите создать новый элемент списка с текстом, не забудьте создать текст как узел Text, который вы добавляете к элементу <li>, а затем вставляете <li> в список.
Вы также можете использовать метод insertBefore для вставки/перемещения существующего элемента (см. «Дополнительные примеры»).
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, полностью поддерживающую метод.
Method | |||||
---|---|---|---|---|---|
insertBefore() | Yes | Yes | Yes | Yes | Yes |
Синтаксис
node.insertBefore(newnode, existingnode)
Значения параметров
Parameter | Type | Description |
---|---|---|
newnode | Node object | Required. The node object you want to insert |
existingnode | Node object | Required. The child node you want to insert the new node before. If set to
null , the insertBefore method will insert the newnode at the end |
Технические детали
Возвращаемое значение: | Объект Node, представляющий вставленный узел |
---|---|
DOM-версия | Базовый объект узла уровня 1 |
Дополнительные примеры
Пример
Переместите элемент <li> из одного списка в другой:
var node = document.getElementById("myList2").lastChild;
var list = document.getElementById("myList1");
list.insertBefore(node, list.childNodes[0]);