Adição e Remoção de Elementos
Agora que sabemos como fazer a manipulação de texto e a manipulação de atributos, vamos chegar à emocionante parte de adicionar e remover elementos no nosso DOM. Isso permitirá o desenvolvimento de páginas dinâmicas e interativas. Vamos!
Adição de Elementos com createElement e appendChild
Se quisermos adicionar um novo elemento ao nosso DOM, primeiro precisamos criá-lo e, em seguida, anexá-lo a um elemento existente. Vejamos um exemplo simples:
// Criando um novo parágrafo
var novoParagrafo = document.createElement('p');
// Adicionando texto ao parágrafo
novoParagrafo.textContent = 'Isso é um novo parágrafo!';
// Encontrando o local onde queremos adicionar o parágrafo
var localDeAdicao = document.getElementById('meuDiv');
// Adicionando o parágrafo ao local desejado
localDeAdicao.appendChild(novoParagrafo);
Aqui, criamos dinamicamente um novo parágrafo, adicionamos texto a ele e o anexamos a um elemento existente com o ID “meuDiv”.
Remoção de Elementos com removeChild
E se quisermos se livrar de um elemento específico? Fazemos isso usando removeChild:
// Encontrando o parágrafo que queremos remover
var paragrafoParaRemover = document.getElementById('paragrafoARemover');
// Encontrando o pai do parágrafo e removendo o parágrafo
paragrafoParaRemover.parentNode.removeChild(paragrafoParaRemover);
Aqui, identificamos o parágrafo que desejamos remover e, em seguida, encontramos seu pai para efetuar a remoção.
Com essas habilidades, você está preparado para fazer a remoção e a adição de elementos em sua página. Portanto, vamos avançar para o módulo 3, nele falaremos sobre a Manipulação de Estilos e Classes. Preparados? Então, siga em frente!
