HTML DOM Element insertBefore() Methode

Definition und Verwendung

insertBefore() Fügt ein Kindknoten vor einem bestehenden Kindknoten ein.

Siehe auch:

appendChild() -Methode

replaceChild() -Methode

removeChild() -Methode

remove() -Methode

childNodes -Eigenschaft

firstChild -Eigenschaft

lastChild -Eigenschaft

firstElementChild -Eigenschaft

lastElementChild -Eigenschaft

Beispiel

Beispiel 1

  1. Erstellen Sie ein <li> -Element
  2. Erstellen Sie einen Textknoten
  3. Fügen Sie den Text dem <li> -Element hinzu
  4. Fügen Sie das <li> -Element vor dem ersten Kindelement des <ul> -Elements ein:
const newNode = document.createElement("li");
const textNode = document.createTextNode("Water");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

Versuchen Sie es selbst

Beispiel 2

Bewegen Sie den letzten Element aus einer Liste in die Liste am Anfang einer anderen Liste:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, list.children[0]);

Versuchen Sie es selbst

Beispiel 3

Bewegen Sie den letzten Element aus einer Liste in die Liste am Ende einer anderen Liste:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, null);

Versuchen Sie es selbst

Syntax

element.insertBefore(newnode, existingnode)

oder

node.insertBefore(newnode, existingnode)

Parameter

Parameter Beschreibung
newnode Erforderlich. Der zu insertierende Knoten (Element).
existingnode

Optional. Fügt einen neuen Knoten als Kind vor dem bestehenden Knoten ein.

Falls nicht angegeben, fügt der insertBefore-Methoden newnode am Ende ein.

Rückgabewert

Typ Beschreibung
Knoten Der eingefügte Knoten.

Browserunterstützung

element.insertBefore() Es ist eine Eigenschaft von DOM Level 1 (1998).

Es wird in allen Browsern vollständig unterstützt:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützt 9-11 Unterstützt Unterstützt Unterstützt Unterstützt