Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La méthode ParentNode.append
insère un ensemble d’objets Node
ou DOMString
après le dernier enfant de ParentNode
. Les objets DOMString
(c’est-à-dire les chaînes de caractères) sont insérés comme nœuds Text
équivalents.
Différences avec Node.appendChild()
:
ParentNode.append()
vous permet également d’ajouter des objetDOMString
, tandis queNode.appendChild()
accepte seulement les objetsNode
.ParentNode.append()
n’a pas de valeur de retour, tandis queNode.appendChild()
retourne l’objetNode
ajouté.ParentNode.append()
peut ajouter plusieurs nœuds et chaînes, alors queNode.appendChild()
peut seulement ajouter un nœud.
Syntaxe
[Throws, Unscopable] void ParentNode.append((Node or DOMString)... nodes);
Paramètres
Exceptions
HierarchyRequestError
:
Le nœud ne peut pas être inséré au point spécifié dans la hiérarchie.
Exemples
Ajouter un élément
var parent = document.createElement("div"); var p = document.createElement("p"); parent.append(p); console.log(parent.childNodes); // NodeList [ <p> ]
Ajouter du texte
var parent = document.createElement("div"); parent.append("Du texte"); console.log(parent.textContent); // "Du texte"
Ajouter un élément et du texte
var parent = document.createElement("div"); var p = document.createElement("p"); parent.append("Du texte", p); console.log(parent.childNodes); // NodeList [ #text "Du texte", <p> ]
ParentNode.append()
est unscopable
La méthode append()
n’est pas accessible dans un bloc with
. Voir Symbol.unscopables
pour plus d’information.
var parent = document.createElement("div"); with(parent) { append("foo"); } // ReferenceError: append is not defined
Polyfill
Vous pouvez utiliser la méthode append()
dans Internet Explorer 9 (et supérieur) avec le code suivant :
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md (function (arr) { arr.forEach(function (item) { if (item.hasOwnProperty('append')) { return; } Object.defineProperty(item, 'append', { configurable: true, enumerable: true, writable: true, value: function append() { var argArr = Array.prototype.slice.call(arguments), docFrag = document.createDocumentFragment(); argArr.forEach(function (argItem) { var isNode = argItem instanceof Node; docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); }); this.appendChild(docFrag); } }); }); })([Element.prototype, Document.prototype, DocumentFragment.prototype]);
Spécification
Spécification | Statut | Commentaire |
---|---|---|
DOM La définition de 'ParentNode.append()' dans cette spécification. |
Standard évolutif | Définition initiale. |
Compatibilité des navigateurs
Navigateur | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
---|---|---|---|---|---|---|
Support de base | 54.0 | 49 (49) | Pas de support | Pas de support | 39 | 10.0 |
Navigateur mobile | Android Webview | Firefox Mobile (Gecko) | IE Mobile | Edge Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Support de base | ? | 49.0 (49) | ? | ? | 39 | 10.2 | 54.0 |