Element.append()

La méthode Element.append() ajoute un ensemble d'objets Node ou de chaînes de caractères après le dernier enfant d'Element. Les chaînes de caractères sont insérées comme des nœuds Text.

Voici les différences entre Element.append() et Node.appendChild() :

• Element.append() permet d'ajouter des chaînes de caractères tandis que Node.appendChild() accepte uniquement les objets Node.
• Element.append() n'a pas de valeur de retour alors que Node.appendChild() renvoie l'objet Node ajouté.
• Element.append() permet d'ajouter plusieurs nœuds et chaînes de caractères tandis que Node.appendChild() ne permet d'ajouter qu'un seul nœud.

Syntaxe

append(param1);
append(param1, param2);
append(param1, param2, /* ... ,*/ paramN);

Paramètres

param1, …, paramN

Un ensemble d'objets Node ou de chaînes de caractères à insérer.

Exceptions

DOMException HierarchyRequestError

Levée lorsque le nœud ne peut être inséré à l'emplacement indiqué dans la hiérarchie.

Exemples

Ajouter un élément

let div = document.createElement("div");
let p = document.createElement("p");
div.append(p);

console.log(div.childNodes); // NodeList [ <p> ]

Ajouter du texte

let div = document.createElement("div");
div.append("Du texte");

console.log(div.textContent); // "Du texte"

Ajouter un élément et du texte

let div = document.createElement("div");
let p = document.createElement("p");
div.append("Du texte", p);

console.log(div.childNodes); // NodeList [ #text "Du texte", <p> ]

<code>append()</code> est hors de la portée créée par <code>with</code>

La méthode append() n'est pas disponible dans la portée créée par une instruction with. Voir Symbol.unscopables pour plus d'informations.

let div = document.createElement("div");

with (div) {
  append("toto");
}
// ReferenceError: append is not defined

Spécifications

Compatibilité des navigateurs

Voir aussi

• Element.prepend()
• Node.appendChild()
• Element.after()
• Element.insertAdjacentElement()
• NodeList