Exemple
Ajouter un élément dans une 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"
Avant d'ajouter:
- Coffee
- Tea
Après avoir ajouté:
- Coffee
- Tea
- Water
Essayez vous - même » Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.
Définition et utilisation
Le appendChild() méthode ajoute un noeud comme le dernier enfant d'un nœud.
Astuce: Si vous voulez créer un nouveau paragraphe, avec le texte, n'oubliez pas de créer le texte comme un nœud de texte que vous ajoutez au paragraphe, puis ajouter le paragraphe au document.
Vous pouvez également utiliser cette méthode pour déplacer un élément d'un élément à un autre (See "More Examples") .
Astuce: Utilisez le insertBefore() méthode pour insérer un nouveau nœud enfant devant un spécifié, existant, nœud enfant.
Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge pleinement la méthode.
méthode | |||||
---|---|---|---|---|---|
appendChild() | Oui | Oui | Oui | Oui | Oui |
Syntaxe
node .appendChild( node )
Les valeurs des paramètres
Paramètre | Type | La description |
---|---|---|
node | Node object | Champs obligatoires. L'objet de nœud que vous voulez ajouter |
Détails techniques
Valeur de retour: | Un objet de noeud représentant le noeud annexé |
---|---|
version DOM | Niveau de base 1 Noeud objet |
autres exemples
Exemple
Déplacer un élément de la liste d'une liste à l'autre:
var node = document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
Avant d'ajouter:
- Coffee
- Tea
- Water
- Milk
Après avoir ajouté:
- Coffee
- Tea
- Milk
- Water
Essayez vous - même » Exemple
Créer un <p> élément et l' ajouter à un <div> élément:
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"
Essayez vous - même » Exemple
Créer un <p> élément avec un texte et l' ajouter à la fin du corps du document:
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>
Essayez vous - même » Pages associées
Référence HTML DOM: href="met_node_haschildnodes.html"> element . hasChildNodes() Method href="met_node_haschildnodes.html"> element . hasChildNodes() Method
Référence HTML DOM: href="met_node_insertbefore.html"> element . insertBefore() Method href="met_node_insertbefore.html"> element . insertBefore() Method
Référence HTML DOM: href="met_node_removechild.html"> element . removeChild() Method href="met_node_removechild.html"> element . removeChild() Method
Référence HTML DOM: href="met_node_replacechild.html"> element . replaceChild() Method href="met_node_replacechild.html"> element . replaceChild() Method
Référence HTML DOM: href="met_document_createelement.html">document. createElement() Method href="met_document_createelement.html">document. createElement() Method
Référence HTML DOM: href="met_document_createtextnode.html">document. createTextNode() Method href="met_document_createtextnode.html">document. createTextNode() Method
Référence HTML DOM: href="met_document_adoptnode.html">document. adoptNode() Method href="met_document_adoptnode.html">document. adoptNode() Method
Référence HTML DOM: href="met_document_importnode.html">document. importNode() Method href="met_document_importnode.html">document. importNode() Method