Метод insertBefore() в DOM HTML

Объект элемента HTML DOM

insertBefore()Метод используется для вставки подузла перед существующим подузлом.

Если переданный подобъект является ссылкой на существующий узел в документе, то insertBefore() перемещает его из текущей позиции в новое местоположение (см. также下面的 "Дополнительные примеры").

Использованиеappendchild()Метод добавляет узел в конец списка подузлов указанного родительского узла.

Синтаксис:

node.insertBefore(newNode, existingNode)

var newElem = document.createElement("h3");　　// Создать новый элемент h3
var newContent = document.createTextNode("Hi there");　　// Создать текстовый контент
newElem.appendChild(newContent);　　// Добавить текстовый узел к новому созданному h3
var body = document.body;　　// Получить BODY
body.insertBefore(newElem, body.childNodes[0]);　// Вставить H3 в начале之子 элементов BODY

Внимание:Если вы хотите создать новый элемент с текстом, запомните, что текст нужно создавать в виде узла Text, затем добавлять его к элементу, а затем добавлять элемент в документ.

Совместимость с браузерами

Метод insertBefore() поддерживается всеми браузерами:

Значение параметра

Технические детали

Более примеров

Создайте элемент <p>и вставьте его в элемент <div>:

var para = document.createElement("p");　// Создать узел <p>
var txt = document.createTextNode("Это параграф.");// Создать текстовый узел
para.appendChild(txt);// Добавить текст к <p>
var div = document.getElementById("demo");// ПолучитьDIVсid=demo
div.insertBefore(para, div.childNodes[0]);// ВDIV的第一个елементеinsertBeforePузел

Этот пример перемещает элемент из его текущего положения в новое положение:

var elem = document.getElementById("myList2").lastElementChild;
var list1 = document.getElementById("myList1");
list1.insertBefore(elem, list1.childNodes[0]);

Соответствующие参考资料

HTML DOM: руководствоnodeМетод .hasChildNodes()

HTML DOM: руководствоnodeМетод .appendChild()

HTML DOM: руководствоnodeМетод .removeChild()

HTML DOM: руководствоnodeМетод .replaceChild()

HTML DOM: руководствоМетод document.createElement()

HTML DOM: руководствоМетод document.createTextNode()

HTML DOM: руководствоМетод document.adoptNode()

HTML DOM: руководствоМетод document.importNode()

Объект элемента HTML DOM