Beispiel
Fügen Sie ein Element in einer Liste:
var node = document.createElement("LI"); // Create a <li>
node
var textnode = document.createTextNode("Water"); // Create a text node
node.appendChild(textnode); // Append the text to <li>
document.getElementById("myList").appendChild(node); // Append <li> to
<ul> with id="myList"Vor anhängt:
- Coffee
- Tea
Nach dem Anhang:
- Coffee
- Tea
- Water
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die appendChild() Methode fügt einen Knoten als das letzte Kind eines Knotens.
Tipp: Wenn Sie einen neuen Absatz erstellen möchten, mit Text, denken Sie daran , den Text als Textknoten erstellen , die Sie auf den Absatz anzuhängen, dann den Absatz an das Dokument anhängen.
Sie können auch diese Methode verwenden , um ein Element von einem Element zum anderen zu bewegen (See "More Examples") .
Tipp: Verwenden Sie die insertBefore() Methode einen neuen untergeordneten Knoten vor einem bestimmten, vorhandenen, untergeordneten Knoten einzufügen.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Methode vollständig unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| appendChild() | Ja | Ja | Ja | Ja | Ja |
Syntax
node .appendChild( node )Parameterwerte
| Parameter | Art | Beschreibung |
|---|---|---|
| node | Node object | Erforderlich. Der Knoten Objekt, das Sie anhängen möchten |
Technische Details
| Rückgabewert: | Ein Knoten Objekt, die die anhängenden Knoten |
|---|---|
| DOM Version | Core Level 1 Knoten Object |
Mehr Beispiele
Beispiel
Bewegen Sie ein Listenelement aus einer Liste in einer anderen:
var node = document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);Vor anhängt:
- Coffee
- Tea
- Water
- Milk
Nach dem Anhang:
- Coffee
- Tea
- Milk
- Water
Versuch es selber " Beispiel
Erstellen Sie ein <p> Element und fügen Sie es zu einem <div> Elemente:
var para = document.createElement("P"); // Create a
<p> node
var t =
document.createTextNode("This is a paragraph.");
// Create a text node
para.appendChild(t);
// Append the text to <p>
document.getElementById("myDIV").appendChild(para);
// Append <p> to <div> with id="myDIV" Versuch es selber " Beispiel
Erstellen Sie ein <p> Element mit etwas Text und fügen Sie es an das Ende des Dokuments Körper:
var x = document.createElement("P"); // Create a <p>
node
var t = document.createTextNode("This is a
paragraph."); // Create a text node
x.appendChild(t);
// Append the text to <p>
document.body.appendChild(x);
// Append <p> to <body> Versuch es selber " Verwandte Seiten
HTML - DOM - Referenz: href="met_node_haschildnodes.html"> element . hasChildNodes() Method href="met_node_haschildnodes.html"> element . hasChildNodes() Method
HTML - DOM - Referenz: href="met_node_insertbefore.html"> element . insertBefore() Method href="met_node_insertbefore.html"> element . insertBefore() Method
HTML - DOM - Referenz: href="met_node_removechild.html"> element . removeChild() Method href="met_node_removechild.html"> element . removeChild() Method
HTML - DOM - Referenz: href="met_node_replacechild.html"> element . replaceChild() Method href="met_node_replacechild.html"> element . replaceChild() Method
HTML - DOM - Referenz: href="met_document_createelement.html">document. createElement() Method href="met_document_createelement.html">document. createElement() Method
HTML - DOM - Referenz: href="met_document_createtextnode.html">document. createTextNode() Method href="met_document_createtextnode.html">document. createTextNode() Method
HTML - DOM - Referenz: href="met_document_adoptnode.html">document. adoptNode() Method href="met_document_adoptnode.html">document. adoptNode() Method
HTML - DOM - Referenz: href="met_document_importnode.html">document. importNode() Method href="met_document_importnode.html">document. importNode() Method