Como inserir um elemento após o outro elemento em JavaScript

Neste artigo você vai aprender a como inserir um elemento após o outro elemento em JavaScript, manipulando o DOM de uma forma super simples

inserir um elemento após o outro elemento em JavaScript capa

Fala programador(a), beleza? Bora aprender mais sobre DOM e JavaScript!

Em JavaScript só temos métodos para inserir elementos antes de um outro elemento, que é o insertBefore

Porém a partir deste método e também de outros recursos de JS podemos criar o insertAfter, que não é nativo da linguagem

A nossa função aceitará um elemento que será o a ser inserido e também um segundo argumento para um nó de referência

Este nó de referência é o elemento que terá um elemento inserido após ele

Veja como fica o método:

function insertAfter(newElement, reference) {
    reference.parentNode.insertBefore(newElement, reference.nextSibling);
}

/* Testando */
const el = document.createElement("p")

el.innerHTML = "Testando";

const div = document.querySelector("#test");

insertAfter(el, div);

O nosso método insertAfter funciona da seguinte maneira:

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

474 aulas
20 projetos
39h 27min

Acessamos o nó pai do elemento de referência, utilizando o método insertBefore para inserir um novo elemento

Porém como o segundo parâmetro dessa função é o irmão da referência, acaba que o efeito é inserir o elemento após o outro

Como é o verdadeiro intuito deste post

Veja a exemplificação na prática, após a definição da função

Teremos um <p> após a tag <div> com id de #test

Conclusão

Neste artigo você aprendeu a como inserir um elemento após o outro elemento em JavaScript

Criamos uma nova função, pois esta funcionalidade não existe em JavaScript ainda

Utilizamos como base desta função outros métodos de DOM, como: insertBefore e nextSibiling

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!
Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias
O link acima contém um cupom de desconto para os cursos!

Quando você vai precisar disso na prática?

Vale entender o porquê antes de sair decorando a função, né?

Mensagem de erro embaixo de um input: o campo já está na tela e você quer o aviso logo depois dele, não jogado no fim do formulário

Item novo em uma lista, entrando logo abaixo do item em que o usuário clicou

Um bloco de conteúdo depois de um parágrafo específico, tipo aviso, banner ou card

Repara no que esses casos têm em comum: você não sabe qual é o próximo elemento, e nem quer saber

Você só sabe quem é o vizinho de cima

E é exatamente esse o trabalho do insertAfter 🙂

Cuidado com o nó pai:

Repara numa coisa na nossa função: ela depende do parentNode do elemento de referência

Que parentNode? É o elemento que envolve a referência na árvore do DOM, tipo a div que está em volta do seu p

Se a referência não estiver na página, não existe esse pai pra receber a inserção, e a função quebra na hora

O caso clássico é o querySelector não achar nada e devolver null, o famoso script rodando antes do HTML existir

Dá pra blindar com uma linha só:

function insertAfter(newElement, reference) {
if (!reference || !reference.parentNode) return

reference.parentNode.insertBefore(newElement, reference.nextSibling)
}

Simples assim, e você foge daquele erro chato que aparece numa linha que parecia certinha 😀

Inserindo vários elementos de uma vez:

Agora vem a pegadinha que pega quase todo mundo

Se você chamar o insertAfter várias vezes usando SEMPRE a mesma referência, cada elemento novo entra grudado logo depois dela

Resultado: o último que você inseriu aparece em primeiro, e a sua lista sai de trás pra frente


const div = document.querySelector("#test")

let referencia = div

itens.forEach(function (texto) {
const p = document.createElement("p")
p.innerHTML = texto

insertAfter(p, referencia)

referencia = p
})

Se liga na última linha do loop: a referência passa a ser o elemento que acabou de entrar

Assim a ordem sai igualzinha à do seu array

Bora testar? Troca os textos do array e olha a árvore no inspetor do navegador