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

  • HierarchyRequestError : Le noeud ne peut pas √™tre ins√©r√© au point sp√©cifi√© dans la hi√©rarchie.

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

No compatibility data found for api.ChildNode.after.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

Voir aussi