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
Exceções
HierarchyRequestError
: Nó não pode ser inserido até que seja especificado o ponto da hierarquia.
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. |
Navegador compatível
BCD tables only load in the browser
A compatibilidade table sobre esta página é gerada a partir da estruta de dado. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.