пример
Включить новый <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>Перед установкой:
- Coffee
- Tea
После вставки:
- Water
- Coffee
- Tea
Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
insertBefore() метод вставляет узел , как ребенок, прямо перед существующим ребенком, который вы укажете.
Совет: Если вы хотите создать новый элемент списка, с текстом, не забудьте создать текст в виде узла Text , который вы добавляете в <li> элемент, а затем вставьте <li> в список.
Вы также можете использовать метод InsertBefore для вставки / переместить существующий элемент (See "More Examples") .
Поддержка браузеров
Числа в таблице указать первую версию браузера, который полностью поддерживает метод.
| метод | |||||
|---|---|---|---|---|---|
| insertBefore() | да | да | да | да | да |
Синтаксис
Значения параметров параметр Тип Описание newnode Node object Необходимые. Объект узла вы хотите вставить existingnode Node object Необязательный. Дочерний узел вы хотите, прежде чем вставить новый узел. Если не указано, метод InsertBefore вставит newnode в конце
Технические подробности
Возвращаемое значение: Узел Объект, представляющий вставленный узел DOM Version Базовый уровень 1 Узел объект
Еще примеры
пример
Перемещение <li> элемент из одного списка в другой:
var node = document.getElementById("myList2").lastChild;
var
list = document.getElementById("myList1");
list.insertBefore(node, list.childNodes[0]); Перед установкой:
- Coffee
- Tea
- Water
- Milk
После InsertBefore:
- Milk
- Coffee
- Tea
- Water
Попробуй сам "