JavaScript History-Objekt HTML DOM Element-Objekt

HTML DOM insertBefore() Methode

insertBefore()Die Methode wird verwendet, um einen Unterknoten vor einem bestimmten bestehenden Unterknoten einzufügen.

Wenn das angegebene Unterelement eine Referenz auf einen bestehenden Knoten im Dokument ist, bewegt insertBefore() es von seiner aktuellen Position an die neue Position (siehe unten unter "Mehr Beispiele").

Verwendungappendchild()Diese Methode fügt einen Knoten am Ende der Liste der Kindknoten des angegebenen Elternknotens hinzu.

Syntax:

node.insertBefore(newNode, existingNode)

Beispiel

var newElem = document.createElement("h3");　　//　Erstellen Sie ein neues h3Element
var newContent = document.createTextNode("Hi there");　　//　Erstellen Sie einige Textinhalte
newElem.appendChild(newContent);　　//　Fügen Sie den Textknoten zu dem neu erstellten h hinzu3
var body = document.body;　　//　Erhalten Sie BODY
body.insertBefore(newElem, body.childNodes[0]);　//　Fügen Sie einen H vor den ersten Kindknoten von BODY ein3

Testen Sie heraus‹/›

Hinweis:Wenn Sie ein neues Element mit Text erstellen möchten, denken Sie daran, den Text als Textknoten zu erstellen, fügen Sie ihn dann dem Element hinzu und fügen Sie das Element dann dem Dokument hinzu.

Browserkompatibilität

insertBefore() wird von allen Browsern vollständig unterstützt:

Methode
insertBefore()	Ja	Ja	Ja	Ja	Ja

Parameterwert

Parameter	Beschreibung
newNode	Das Knotenobjekt, das Sie einfügen möchten
existingNode	Sie müssen einen Kindknoten vor einem neuen Knoten einfügen. Wenn auf null gesetzt, fügt die Methode insertBefore() newNode am Ende ein

Technische Details

Rückgabewert:	Ein Node-Objekt, das den eingefügten Knoten darstellt
DOM-Version:	DOM-Ebene1

Mehr Beispiele

Erstellen Sie ein <p>-Element und fügen Sie es dem <div>-Element hinzu:

Beispiel

var para = document.createElement("p");　　　//　Erstellen Sie einen <p>-Knoten
var txt = document.createTextNode("Dies ist ein Absatz.");//　Erstellen Sie einen Textknoten
para.appendChild(txt);//　Fügen Sie Text zu <p> hinzu
var div = document.getElementById("demo");//　Erhalten Sie den DIV mit "id=demo"
div.insertBefore(para, div.childNodes[0]);//　Fügen Sie einen P-Knoten vor dem ersten Kindknoten von DIV ein

Testen Sie heraus‹/›

Dieser Beispiel bewegt das Element von seiner aktuellen Position in eine neue Position:

Beispiel

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

Testen Sie heraus‹/›