Derniers tutoriels de développement web
 

HTML DOM appendChild() Method

<Object Élément

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

Exemples

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


<Object Élément