Méthode appendChild() du HTML DOM

Objet Element HTML DOM

appendChild()L'objectif de la méthode est : ajouter un nœud à la fin de la liste des nœuds enfants du parent spécifié.

Si le nœud enfant spécifié est une référence à un nœud existant dans le document, appendChild() le déplace de sa position actuelle à la nouvelle position (voir les "Plus d'exemples" ci-dessous).

UtilisationinsertBefore()La méthode peut insérer un nouveau nœud avant un nœud enfant existant spécifié.

Syntaxe :

node.appendChild(node)

var newElem = document.createElement("h3;　　　//　Créer un nouveau h3Élément
var newContent = document.createTextNode("Bonjour, comment ça va ?");　//　Créer du contenu texte　
newElem.appendChild(newContent);　//　　Ajouter un nœud de texte à un h3　
document.body.appendChild(newElem);　　//　　Ajouter l'élément nouvellement créé et son contenu au DOM

Attention :Si vous devez créer un élément avec du texte, n'oubliez pas de créer le texte en tant que nœud Texte, puis de le joindre à l'élément, puis de joindre cet élément au document.

Compatibilité des navigateurs

Tous les navigateurs supportent complètement la méthode appendChild() :

Valeur des paramètres

Détails techniques

Plus d'exemples

Créer un élément <p> et le joindre à un élément <div> :

var para = document.createElement("p");　　　//　Créer un nœud <p>
var txt = document.createTextNode("Ceci est un paragraphe.");//　Créer un nœud de texte
para.appendChild(txt);//　Ajouter le texte à <p>
document.getElementById("demo").appendChild(para);//　Ajouter <p> à <div>

Créer un élément <p> et le joindre à la fin du corps du document :

var para = document.createElement("p");　　　//　Créer un nœud <p>
var txt = document.createTextNode("Ceci est un paragraphe.");//　Créer un nœud de texte
para.appendChild(txt);//　Ajouter le texte à <p>
document.body.appendChild(para);//　Ajouter <p> au body

Ce exemple déplace un élément de sa position actuelle à une nouvelle position :

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

Références associées

Référence HTML DOM :node.hasChildNodes() méthode

Référence HTML DOM :node.insertBefore() méthode

Référence HTML DOM :node.removeChild() méthode

Référence HTML DOM :node.replaceChild() méthode

Référence HTML DOM :Méthode document.createElement()

Référence HTML DOM :Méthode document.createTextNode()

Référence HTML DOM :Méthode document.adoptNode()

Référence HTML DOM :Méthode document.importNode()

Objet Element HTML DOM