Méthode HTML DOM Element appendChild()

Définition et utilisation

appendChild() La méthode ajoute le noeud (élément) en tant que dernier enfant de l'élément.

Voir également :

Méthode insertBefore()

Méthode replaceChild()

Méthode removeChild()

Méthode remove()

Propriété childNodes

Propriété firstChild

Propriété lastChild

Propriété firstElementChild

Propriété lastElementChild

Méthodes de documentation associées :

Méthode createElement()

Méthode createTextNode()

Exemple

Exemple 1

Ajouter un élément à la liste :

const node = document.createElement("li");
const textnode = document.createTextNode("Eau");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);

Avant l'ajout :

  • Café
  • Thé

Après l'ajout :

  • Café
  • Thé
  • Eau

Essayez-le vous-même

Exemple 2

Déplacer des éléments de liste d'une liste à une autre :

const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);

Avant le déplacement :

  • Café
  • Thé

  • Eau
  • Lait

Après le déplacement :

  • Café
  • Thé
  • Lait

  • Eau

Essayez-le vous-même

Exemple 3

Créer un paragraphe avec du texte :

  • Créer un élément de paragraphe
  • Créer un nœud de texte
  • Ajouter un nœud de texte à un paragraphe
  • Ajouter un paragraphe au document

Créez un élément <p> et ajoutez-le à l'élément <div> :

const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);

Essayez-le vous-même

Exemple 4

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);

Essayez-le vous-même

Syntaxe

element.appendChild(node)

ou

node.appendChild(node)

Paramètres

Paramètres Description
node Obligatoire. Le nœud à ajouter.

Valeur de retour

Type Description
Nœud Nœud ajouté.

Support du navigateur

element.appendChild() C'est une caractéristique de DOM Level 1 (1998).

Tous les navigateurs le supportent complètement :

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support