Entrar Ainda não tem acesso?
1
resposta

Diferença entre getElementById e createElement em JAVASCRIPT

Referente ao curso JavaScript: construindo páginas dinâmicas, no capítulo Detectando interações e atividade Anexando elementos

por Saymon Vinícius de Oliveira costa
| 4.3k xp | 1 posts
ASSISTENTE ADMINISTRATIVO

Olá a todos ! Estou com uma duvida nesta atividade referente a diferença entre getElementById e createElement nesta aplicação. para realizarmos o ''teste'' no campo de digitação foi utilizado esta parte de codigo: 

const listaDeCompras = document.getElementById("lista-de-compras")
conteinerItemDaLista.appendChild(inputItemDaLista);
conteinerItemDaLista.appendChild(nomeItem);
itemDaLista.appendChild(conteinerItemDaLista);
listaDeCompras.appendChild(itemDaLista);

Ao inves de utilizarmos o getElementById em listaDeCompras, utilizarmos o createElement ficando assim : const listaDeCompras = createElement("ul"); Na aplicação o valor digitado no campo de digitação não é gerado como um novo item na lista. por que ao utilizar o getElementById na listaDeCompras o valor digitado vira um novo item na lista e ao utilizar o createElement não tem o mesmo efeito?

1 resposta
por Mike de Sousa
| 1099.4k xp | 1968 posts
Alura Scuba Team Suporte Educacional

Olá, Saymon! Como vai?

A diferença crucial aqui é que getElementById está trabalhando com um elemento já presente no DOM, enquanto createElement cria um novo elemento que precisa ser explicitamente adicionado ao DOM para ser visível e funcional na página.

Quando você substitui getElementById por createElement, o novo <ul> criado não está sendo anexado ao DOM, portanto, os itens que você adiciona não são visíveis na lista de compras. Então, em resumo:

  1. getElementById: Este método é usado para selecionar um elemento que já existe no DOM (Document Object Model) do HTML. No seu caso, getElementById("lista-de-compras") está pegando um elemento <ul> que já existe no seu arquivo HTML, e é dentro deste elemento que você está adicionando novos itens da lista. Como ele já existe no DOM, qualquer alteração ou adição que você fizer será refletida na página.

  2. createElement: Este método é usado para criar um novo elemento HTML que ainda não existe no DOM. Quando você faz createElement("ul"), está criando um novo elemento <ul>, mas este elemento não está automaticamente inserido no DOM. Para que ele apareça na página, você precisaria anexá-lo a algum elemento existente no DOM usando, por exemplo, appendChild.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado