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 ChildNode.after () insère un ensemble d'objets Node ou DOMString dans la liste des enfants de ce parent de ChildNode, juste après ce ChildNode. Les objets DOMString sont insérés comme des noeuds Text équivalents.

Syntaxe

[Throws, Unscopable] 
void ChildNode.after((Node or DOMString)... nodes);

Paramètres

nodes
Un ensemble d'objets Node ou DOMString à insérer.

Exceptions

Exemples

Insertion d'un élément

var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");

child.after(span);

console.log(parent.outerHTML);
// "<div><p></p><span></span></div>"

Insertion d'un texte

var parent = document.createElement("div");
var child = document.createElement("p"); 
parent.appendChild(child);

child.after("Text"); 

console.log(parent.outerHTML);
// "<div><p></p>Texte</div>"

Insertion d'un élément et de  texte

var parent = document.createElement("div");
var child = document.createElement("p"); 
parent.appendChild(child); 
var span = document.createElement("span");

child.after(span, "Text"); 

console.log(parent.outerHTML);
// "<div><p></p><span></span>Texte</div>"

ChildNode.after() n'est pas accessible

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

with(node) { 
  after("foo");
}
// ReferenceError: after n'est pas défini 

Polyfill

Vous pouvez appliquer la méthode after() dans Internet Explorer 9 et plus haut avec le code suivant :

//de : https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/after()/after().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('after')) {
      return;
    }
    Object.defineProperty(item, 'after', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function after() {
        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.parentNode.insertBefore(docFrag, this.nextSibling);
      }
    });
  });
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

 

//https://github.com/FabioVergani/js-Polyfill_Element.prototype.after/blob/master/after.js

(function(x){
 var o=x.prototype,p='after';
 if(!o[p]){
    o[p]=function(){
     var e, m=arguments, l=m.length, i=0, t=this, p=t.parentNode, n=Node, s=String, d=document;
     if(p!==null){
        while(i<l){
         e=m[i];
         if(e instanceof n){
            t=t.nextSibling;
            if(t!==null){
                p.insertBefore(e,t);
            }else{
                p.appendChild(e);
            };
         }else{
            p.appendChild(d.createTextNode(s(e)));
         };
         ++i;
        };
     };
    };
 };
})(Element);



/*
min:

(function(x){
 var o=x.prototype;
 o.after||(o.after=function(){var e,m=arguments,l=m.length,i=0,t=this,p=t.parentNode,n=Node,s=String,d=document;if(p!==null){while(i<l){((e=m[i]) instanceof n)?(((t=t.nextSibling )!==null)?p.insertBefore(e,t):p.appendChild(e)):p.appendChild(d.createTextNode(s(e)));++i;}}});
}(Element));

*/

 

Spécification

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

Compatibilité Avec les navigateurs

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

Voir également

Étiquettes et contributeurs liés au document

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