HTML DOM appendChild() Methode

HTML DOM Element-Objekt

appendChild()Die Aufgabe der Methode ist: Ein Knoten wird am Ende der Liste der Kindknoten des angegebenen Elternteils hinzugefügt.

Wenn der angegebene Kindknoten eine Referenz zu einem bestehenden Knoten im Dokument ist, bewegt appendChild() ihn von seiner aktuellen Position an die neue Position (siehe unten "Mehr Beispiele").

VerwendunginsertBefore()Die Methode kann einen neuen Kindknoten vor einem bestimmten bestehenden Kindknoten einfügen.

Syntax:

node.appendChild(node)

var newElem = document.createElement("h3　　　//　Erstellen Sie ein neues h3Element
var newContent = document.createTextNode("Hallo, wie geht's!");　//　Erstellen Sie einige Textinhalte　
newElem.appendChild(newContent);　//　　Fügen Sie einen Textknoten zu einem neu erstellten h hinzu3　
document.body.appendChild(newElem);　　//　　Fügen Sie das neu erstellte Element und seinen Inhalt dem DOM hinzu

Hinweis:Wenn Sie ein neues Element mit Text erstellen möchten, beachten Sie, dass Sie den Text als Textknoten erstellen und ihn dann dem Element hinzufügen, bevor Sie es dem Dokument hinzufügen.

Browserkompatibilität

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

Parameterwert

Technische Details

Mehr Beispiele

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

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 den Text in <p> hinzu
document.getElementById("demo").appendChild(para);//　Fügen Sie <p> zu <div> hinzu

Erstellen Sie ein <p>-Element und fügen Sie es dem Ende des Dokumentkörpers hinzu:

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 den Text in <p> hinzu
document.body.appendChild(para);//　Fügen Sie <p> dem body hinzu

Dieser Beispielcode bewegt ein Element von seiner aktuellen Position zu einer neuen Position:

var elem = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1).appendChild(elem);

Zusammenhängende Referenzen

HTML DOM Referenz:node.hasChildNodes() Methode

HTML DOM Referenz:node.insertBefore() Methode

HTML DOM Referenz:node.removeChild() Methode

HTML DOM Referenz:node.replaceChild() Methode

HTML DOM Referenz:document.createElement() Methode

HTML DOM Referenz:document.createTextNode() Methode

HTML DOM Referenz:document.adoptNode() Methode

HTML DOM Referenz:document.importNode() Methode

HTML DOM Element-Objekt