--- title: ChildNode.after() slug: Web/API/ChildNode/after tags: - API - DOM - Experimental - Nó - Referencia - metodo translation_of: Web/API/ChildNode/after ---
The ChildNode
.after()
method inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this ChildNode
's parent, just after this ChildNode
. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
[Throws, Unscopable] void ChildNode.after((Node or DOMString)... nodes);
nós
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>"
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>"
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 unscopableThe after()
method is not scoped into the with
statement. Veja {{jsxref("Symbol.unscopables")}} para maior infomação.
with(node) { after("foo"); } // ReferenceError: after is not defined
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 | Status | Comentário |
---|---|---|
{{SpecName('DOM WHATWG', '#dom-childnode-after', 'ChildNode.after()')}} | {{Spec2('DOM WHATWG')}} | Initial definition. |
{{Compat("api.ChildNode.after")}}