HTML-DOM -insertBefore()- Methode
Beispiel
Fügen Sie ein neues <li>-Element vor dem ersten untergeordneten Element eines <ul>-Elements ein:
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>
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die Methode insertBefore() fügt einen Knoten als untergeordneten Knoten direkt vor einem vorhandenen untergeordneten Element ein, das Sie angeben.
Tipp: Wenn Sie ein neues Listenelement mit Text erstellen möchten, denken Sie daran, den Text als Textknoten zu erstellen, den Sie an das Element <li> anhängen, und fügen Sie dann <li> in die Liste ein.
Sie können auch die insertBefore-Methode verwenden, um ein vorhandenes Element einzufügen/zu verschieben (siehe "Weitere Beispiele").
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Verfahren vollständig unterstützt.
| Method | |||||
|---|---|---|---|---|---|
| insertBefore() | Yes | Yes | Yes | Yes | Yes |
Syntax
node.insertBefore(newnode, existingnode)
Parameterwerte
| Parameter | Type | Description |
|---|---|---|
| newnode | Node object | Required. The node object you want to insert |
| existingnode | Node object | Required. The child node you want to insert the new node before. If set to
null, the insertBefore method will insert the newnode at the end |
Technische Details
| Rückgabewert: | Ein Knotenobjekt, das den eingefügten Knoten darstellt |
|---|---|
| DOM-Version | Knotenobjekt der Kernebene 1 |
Mehr Beispiele
Beispiel
Verschieben Sie ein <li>-Element von einer Liste in eine andere:
var node = document.getElementById("myList2").lastChild;
var list = document.getElementById("myList1");
list.insertBefore(node, list.childNodes[0]);