1
resposta

[Dúvida] Dúvida

Por qual motivo o numeroItem posso usar o innerHTML e no novoItem abaixo só por appendChild, sendo que ambos foram criados via javascript? Pela explicação do professor, uso o appendChild para elementos criados pelo javascript, só que ambos foram criados igualmente.

const numeroItem = document.createElement("strong");

const novoItem = document.createElement('li');

numeroItem.innerHTML = quantidade; //porque eu puder usar innerHTML aqui se ele também foi criado pelo createElement?

novoItem.appendChild(numeroItem)

Outro detalhe, é que na sequência, quando o professor cria o novoItem.innerHTML+=nome; ele menciona que agora sim ele pode adicionar o nome após fazer o appendChild, o que percebi não haver relação, eu poderia ter criado antes, até fiz isso e funcionou, ele preencher o innerHTML com os dois dados, pois nome não foi criado pelo javascript. Certo?

1 resposta

Olha, está faltando código aqui para te dar uma resposta mais assertiva. Então, se possível, coloque o JS completo ou código do repositório de onde seu código está para que a gente consiga te ajudar mais, por gentileza. ;-)

Usamos o método appendChild() quando queremos que elemento criado seja anexado como filho de outro elemento, ou seja, neste caso aí, queremos colocar numeroItem dentro de novoItem. Isso geraria um HTML assim, por exemplo:

<li>
    <strong>1</strong>
</li>
<li>
    <strong>2</strong>
</li>

A propriedade innerHTML permite que um valor, um texto ou até mesmo um trecho de HTML seja inserido dentro do elemento em questão. Neste caso, o JS está dizendo ao DOM pega o conteúdo de dentro de quantidade e insere dentro da tag numeroItem usando a propriedade innerHTML.

Quando a parte do código:

novoItem.innerHTML+=nome;

é importante lembrar que existem muitas formas de se resolver um problema. O professor talvez tenha usado uma delas e, por uma questão de didática ou para facilitar a explicação, talvez ele tenha entendido como a melhor forma de escrever e explicar esse trecho de código. =)

O JavaScript permite resolver problemas de muitas maneiras diferentes. Como, neste caso, me falta contexto de código aqui, eu não consigo ver outras possibilidade de resolução.

Links para conhecer e saber mais:

  1. MDN - Element.innerHTML
  2. MDN - Node.appendChild
  3. MDN - Document.createElement()