5

Em jquery:

$( "#main article:nth-child(3)" ).after( "<div style='clear:both;/>" );

Como ficaria em JS puro?

2 Respostas 2

8

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étodo insertBefore com nextSibling.

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>

1
  • Bem visto, ++
    – Sergio
    Commented 6/11/2015 às 10:46
4

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.


Exemplo:

var elemento = document.querySelector('p');
elemento.insertAdjacentHTML('afterend', '<p>Overflow</p>');
p { display: inline }
<p>Stack</p>

1
  • boa resposta, +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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .