ChildNode.after()

Experimental

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>Text</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>Text</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é des navigateurs

BCD tables only load in the browser

Voir aussi