ChildNode.after()

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.


El método ChildNode.after() inserta un conjunto de objetos Node o DOMString en la lista de hijos de este ChildNode del padre, justo después de este ChildNode. Los objetos DOMString se insertan como nodos equivalentes Text.

Sintaxis

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

Parámetros

nodes
Un conjunto de objetos Node o DOMString para insertar.

Excepciones

Ejemplos

Insertando un elemento

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>"

Insertando texto

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>"

Insertando un elemento y texto

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() es unscopable

El método after() no está incluido en la declaración with.Consulte Symbol.unscopables para obtener más información.

with(node) { 
  after("foo");
}
// ReferenceError: after is not defined 

Polyfill

Puedes usar un polyfill del método after() en Internet Explorer 9 y superiores con el siguente código:

// from: 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]);

Otro polyfill

// from: 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);



/*
minified:

(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));
*/

Especificación

Especificación Estado Comentario
DOM
La definición de 'ChildNode.after()' en esta especificación.
Living Standard Definición Inicial.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
after
Experimental
Chrome Soporte completo 54Edge Soporte completo 17Firefox Soporte completo 49IE Sin soporte NoOpera Soporte completo 39Safari Sin soporte NoWebView Android Soporte completo 54Chrome Android Soporte completo 54Firefox Android Soporte completo 49Opera Android Soporte completo 41Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 6.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.

Ver también