Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Esta é uma tecnologia experimental
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

The ChildNode.after() method inserts a set of Node or DOMString objects in the children list of this ChildNode's parent, just after this ChildNode. DOMString objects are inserted as equivalent Text nodes.

Sintaxe

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

Parâmetros

nós
A set of Node or DOMString objects to insert.

Exceções

Exemplos

Inserindo uum elemento

var parente = document.createElement("div");
var filho = document.createElement("p");
parente.appendChild(filho);
var span = document.createElement("span");

filho.after(span);

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

Inserindo texto

var parente = document.createElement("div");
var filho = document.createElement("p"); 
parente.appendChild(filho);

filho.after("Text"); 

console.log(parente.outerHTML);
// "<div><p></p>Text</div>"

Inserindo um elemento e um texto 

var parente = document.createElement("div");
var filho = document.createElement("p"); 
parente.appendChild(filho); 
var span = document.createElement("span");

filho.after(span, "Text"); 

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

ChildNode.after() is unscopable

The after() method is not scoped into the with statement. Veja Symbol.unscopables para maior infomação.

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

Polyfill

Você pode usar polyfill com  o método  after()  no Internet Explorer 9 e com o seguinte 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]);

 

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

*/

 

Especificação

Especificação Status Comentário
DOM
The definition of 'ChildNode.after()' in that specification.
Padrão em tempo real Initial definition.
Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
after
Experimental
Chrome Full support 54Edge Full support 17Firefox Full support 49IE No support NoOpera Full support 39Safari No support NoWebView Android Full support 54Chrome Android Full support 54Firefox Android Full support 49Opera Android Full support 41Safari iOS No support NoSamsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

Veja mais

Etiquetas do documento e colaboradores

Colaboradores desta página: pedroguilhermelima
Última atualização por: pedroguilhermelima,