Élément HTML DOM appendChild()
Exemples
Ajouter un élément à une liste :
const node = document.createElement("LI");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
- Coffee
- Tea
- Coffee
- Tea
- Water
Déplacer un élément d'une liste à une autre :
const node = document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
- Coffee
- Tea
- Water
- Milk
- Coffee
- Tea
- Milk
- Water
Plus d'exemples ci-dessous.
Définition et utilisation
La appendChild()
méthode ajoute un nœud en tant que dernier enfant d'un nœud.
Conseil : Si vous souhaitez créer un nouveau paragraphe, avec du texte, n'oubliez pas de créer le texte en tant que nœud de texte que vous ajoutez au paragraphe, puis ajoutez le paragraphe au document.
Vous pouvez également utiliser cette méthode pour déplacer un élément d'un élément à un autre (voir "Plus d'exemples").
Syntaxe
node.appendChild(node)
Paramètres
Parameter | Description |
node | Required. The node to append. |
Valeur de retour
Taper | La description |
Nœud | Le nœud ajouté |
Plus d'exemples
Créez un élément <p> et ajoutez-le à un élément <div> :
const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);
Créez un élément <p> et ajoutez-le au corps du document :
const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);
Méthodes d'élément associées :
La méthode Element removeChild()
La méthode Element replaceChild()
La méthode Element hasChildNodes()
Méthodes de documentation associées :
La méthode Document createElement()
La méthode Document createTextNode()
Prise en charge du navigateur
element.appendChild()
est une fonctionnalité DOM niveau 1 (1998).
Il est entièrement pris en charge dans tous les navigateurs :
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |