JavaScript

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

24 de julho de 2021

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:

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!
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x