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.prepend insère un jeu d'objets Node (noeud) ou DOMString (chaîne de caractères) avant le premier enfant de ParentNode. Les objets DOMString sont insérés comme équivalant des noeuds Text.

Syntaxe

ParentNode.prepend(nodesToPrepend);

Paramètres

nodesToPrepend
Un noeud ou plus à insérer avant le premier noeud enfant dans le ParentNode courant. Chaque noeud peut être spécifié comme un objet Node ou comme une chaîne de caractères ; les chaînes sont insérées comme de nouveaux noeuds Text.

Valeur retournée

undefined (indéfini).

Exceptions

Exemples

Ajout d'un élément

var parent = document.createElement("div");
var p = document.createElement("p");
var span = document.createElement("span");
parent.append(p);
parent.prepend(span);

console.log(parent.childNodes); // NodeList [ <span>, <p> ]

Ajout d'un texte

var parent = document.createElement("div");
parent.append("Some text");
parent.prepend("Headline: ");

console.log(parent.textContent); // "Headline: Some text"

Ajout d'un élément et d'un texte

var parent = document.createElement("div");
var p = document.createElement("p");
parent.prepend("Some text", p);

console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]

ParentNode.prepend() est non accessible

La méthode prepend() n'est pas comprise dans l'instruction with. Voir Symbol.unscopables pour plus d'informations.

var parent = document.createElement("div");

with(parent) { 
  prepend("foo");
}
// ReferenceError: prepend is not defined (prepend n'est pas défini)

Polyfill

vous pouvez utiliser le polyfill pour la méthode prepend() si elle n'est pas disponible :

// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('prepend')) {
      return;
    }
    Object.defineProperty(item, 'prepend', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function prepend() {
        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.insertBefore(docFrag, this.firstChild);
      }
    });
  });
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);

Spécification

Spécification Statut Commentaire
DOM
La définition de 'ParentNode.prepend()' dans cette spécification.
Standard évolutif Définition initiale.

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Basic support 54.0 49 (49) Pas de support Pas de support 39 10.0
Fonctionnalité Android Webview Firefox Mobile (Gecko) IE Mobile Edge Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? 49.0 (49) ? ? 39 10.2 54.0

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : Seblor, loella16
Dernière mise à jour par : Seblor,