HTML-DOM-Element appendChild()
Beispiele
Ein Element an eine Liste anhängen:
const node = document.createElement("LI");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
- Coffee
- Tea
- Coffee
- Tea
- Water
Verschieben Sie ein Element von einer Liste in eine andere:
const node = document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
- Coffee
- Tea
- Water
- Milk
- Coffee
- Tea
- Milk
- Water
Weitere Beispiele unten.
Definition und Verwendung
Die appendChild()
Methode fügt einen Knoten als letztes Kind eines Knotens an.
Tipp: Wenn Sie einen neuen Absatz mit Text erstellen möchten, denken Sie daran, den Text als Textknoten zu erstellen, den Sie an den Absatz anhängen, und hängen Sie dann den Absatz an das Dokument an.
Sie können diese Methode auch verwenden, um ein Element von einem Element zu einem anderen zu verschieben (siehe "Weitere Beispiele").
Syntax
node.appendChild(node)
Parameter
Parameter | Description |
node | Required. The node to append. |
Rückgabewert
Typ | Beschreibung |
Knoten | Der angehängte Knoten |
Mehr Beispiele
Erstellen Sie ein <p>-Element und hängen Sie es an ein <div>-Element an:
const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);
Erstellen Sie ein <p>-Element und hängen Sie es an den Hauptteil des Dokuments an:
const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);
Verwandte Elementmethoden:
Die Methode element removeChild()
Die Methode Element replaceChild()
Die Methode Element hasChildNodes()
Verwandte Dokumentmethoden:
Die Methode document createElement()
Die Methode document createTextNode()
Browser-Unterstützung
element.appendChild()
ist eine Funktion von DOM Level 1 (1998).
Es wird in allen Browsern vollständig unterstützt:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |