Element.append()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

js
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

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

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

Ajouter du texte

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

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

Ajouter un élément et du texte

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

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

append() est hors de la portée créée par with

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.

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

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

Spécifications

Specification
DOM Standard
# ref-for-dom-parentnode-append①

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi