La méthode Node.appendChild() ajoute un nœud à la fin de la liste des enfants d'un nœud parent spécifié. Si l'enfant donné est une référence à un nœud existant dans le document, appendChild() le déplace  de sa position actuelle vers une nouvelle position (il n'est pas nécessaire de supprimer le noeud sur son noeud parent avant de l'ajouter à un autre).

Cela signifie qu'un noeud ne peut pas être à deux points du document simultanément. Donc, si le nœud a déjà un parent, le nœud est d'abord retiré, puis ajouté à la nouvelle position. Le Node.cloneNode() peut être utilisé pour réaliser une copie de noeud avant de l'ajouter à son nouveau parent. Notez que les copies faites avec cloneNode ne seront pas automatiquement synchronisées.

Si l'enfant donné est un DocumentFragment , le contenu entier du DocumentFragment est déplacé dans la liste d'enfants du noeud parent spécifié.

Syntaxe

var elementAjoute = element.appendChild(enfant);

Paramètres

aChild
Le noeud à ajouter au noeud parent donné (généralement un élément).

Valeur renvoyée

La valeur renvoyée est l'enfant ajouté sauf si l'enfant donné est un DocumentFragment, auquel cas le DocumentFragment vide est renvoyé.

Notes

Le chaînage peut ne pas fonctionner comme prévu en raison de appendChild() renvoyant l'élément enfant :

var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));

Définit aBlock pour <b></b> uniquement, ce que vous ne voulez probablement pas.

Exemple

// Crée un nouvel élément paragraphe et l'ajoute à la fin du corps du document
var p = document.createElement("p");
document.body.appendChild(p);

Spécification

 

Spécification Statut Commentaire
DOM
La définition de 'Node.appendChild()' dans cette spécification.
Standard évolutif Pas de changement de Document Object Model (DOM) Level 3 Core Specification.
Document Object Model (DOM) Level 3 Core Specification
La définition de 'Node.appendChild()' dans cette spécification.
Obsolete Pas de changement de Document Object Model (DOM) Level 2 Core Specification.
Document Object Model (DOM) Level 2 Core Specification
La définition de 'Node.appendChild()' dans cette spécification.
Obsolete Pas de changement de Document Object Model (DOM) Level 1 Specification.
Document Object Model (DOM) Level 1 Specification
La définition de 'Node.appendChild()' dans cette spécification.
Obsolete Définition initiale.

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Oui) (Oui) 1.0 (1.7 ou moins) (Oui) (Oui) (Oui)
Fonctionnalité Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Oui) (Oui) 1.0 (1.0) (Oui) (Oui) (Oui)

 

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Dernière mise à jour par : loella16,