Em jquery:
$( "#main article:nth-child(3)" ).after( "<div style='clear:both;/>" );
Como ficaria em JS puro?
A função jQuery .after()
insere um elemento irmão depois, em javascript nativo isso é feito com insertBefore()
, segundo a documentação:
(
insertBefore
) Adiciona o nó especificado, antes de um elemento de referência, como filho do nó atual.(...)
Não existe um método
insertAfter
. Mas ele pode ser emulado combinando o métodoinsertBefore
comnextSibling
.
Dessa forma deve-se inserir o novo nó no elemento pai antes do próximo elemento irmão.
A forma curta fica:
elemento.parent.insertBefore(novoElemento, elemento.nextSibling);
O código abaixo adiciona um novo nó como é feito na pergunta, é de fácil compreensão e os comentários complementam.
var elementos = document.querySelectorAll('span:nth-child(3)');
var elemento, pai, div;
for (var i = 0; i < elementos.length; i++) {
elemento = elementos[i];
pai = elemento.parentNode;
div = document.createElement('div');
div.style.clear = 'both';
// insere no elemento pai, antes do próximo irmão
pai.insertBefore(div, elemento.nextSibling)
// se o segundo parâmetro é nulo será inserido como último filho
}
// se for apenas um elemento utilize a linha abaixo
// e apague o loop for
var elemento = document.querySelector('li:nth-child(3)');
<span>item</span>
<span>item</span>
<span>item</span>
<span>item</span>
Use insertAdjacentHTML(posição, conteúdo)
(suporte):
A posição
é definida em relação ao elemento pelos tipos seguintes:
"afterbegin"
: Dentro do elemento, antes de seu primeiro filho (childNode
)."afterend"
: Após o próprio elemento."beforebegin"
: Antes do próprio elemento."beforeend"
: Dentro do elemento, após seu último filho (childNode
).E o posicionamento ficaria:
<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->`
O conteúdo
é string a ser analisada como HTML ou XML e inserido na árvore.
var elemento = document.querySelector('p');
elemento.insertAdjacentHTML('afterend', '<p>Overflow</p>');
p { display: inline }
<p>Stack</p>
+1
. Pelo que vi da documentação a função insertAdjacentHTML
aceita HTML como texto mas não um elemento criado por exemplo com createElement
. Entretanto o Chrome e o IE tem um método insertAdjacentElement
, mesmo não existindo tal método na recomendação W3C
Commented
9/11/2015 às 10:47