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
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:
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!