Метод insertBefore()
Пример
Вставьте новый элемент <li> перед первым дочерним элементом элемента <ul>:
var newItem = document.createElement("LI"); // Создайте узел <li>
var textnode = document.createTextNode("Вода"); // Создайте текстовый узел
newItem.appendChild(textnode); // Добавьте текст к <li>
var list = document.getElementById("myList"); // Получите элемент <ul> для вставки нового узла
list.insertBefore(newItem, list.childNodes[0]); // Вставить <li> перед первым дочерним элементом <ul>
Попробуйте сами »
Дополнительные примеры "Попробуй сам" приведены ниже.
Определение и использование
Метод insertBefore() вставляет узел в качестве дочернего элемента прямо перед существующим дочерним элементом, который вы указываете.
Совет: Если вы хотите создать новый элемент списка с текстом, не забудьте создать текст в виде текстового узла, который вы добавляете к элементу <li>, затем вставьте <li> в список.
Вы также можете использовать метод insertBefore для вставки/Перейти существующего элемента (см."Ещё примеры").
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот метод.
Метод | |||||
---|---|---|---|---|---|
insertBefore() | Да | Да | Да | Да | Да |
Синтаксис
node.insertBefore(newnode, existingnode)
Параметр значений
Параметр | Тип | Описание |
---|---|---|
newnode | Объект node | Требуемый. Объект узла, который вы хотите вставить |
existingnode | Объект node | Требуемый. Дочерний узел, перед которым вы хотите вставить новый узел. Если установлено значение
<null , метод insertBefore вставит newnode в конце |
Технические детали
Возвращает значение | Объект узела, представляющий вставленный узел |
---|---|
DOM Версия | Базового уровня 1 Объект узла |
Ещё примеры
Пример
Перейти в элемент <li> из одного списка в другой:
var node = document.getElementById("myList2").lastChild;
var list = document.getElementById("myList1");
list.insertBefore(node, list.childNodes[0]);
Попробуйте сами »