Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Diferença entre inner HTML e appendChild

Referente ao curso JavaScript na Web: manipule o DOM com JavaScript, no capítulo Adicionar item na lista e atividade Criando elemento

por diego alves de campos
| 182.5k xp | 26 posts

Boa noite, gostaria de saber quando usar e quando usar outro. Tentei fazer um teste e não funcionou. E fiquei com essa dúvida, de qual é a diferença entre os dois e em quais ocasiões devo usar.

const criarTarefa = (event) =>{
  event.preventDefault()

  const lista = document.querySelector("[data-list]")
  const input = document.querySelector('[data-form-input]')
  const valor = input.value


  const tarefa = document.createElement('li')
  tarefa.classList.add('task')
  const conteudo = `<p class= "content">${valor}</p>`


  // tarefa.innerHTML = conteudo
  lista.appendChild(tarefa)
  tarefa.appendChild(conteudo)
  input.value = " "
}

const novaTarefa = document.querySelector('[data-form-button]')


novaTarefa.addEventListener('click', criarTarefa)
3 respostas
solução!
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Diego, tudo bem?

O appendChild aceita um elemento pai e um elemento filho. Veja no exemplo:

    let p = document.createElement("p");
      document.body.appendChild(p);
      p.innerHTML = "<span>Fui adicionado ao DOM</span>"

No trecho acima, estamos adicionando diretamente ao dom, dentro da tag body o elemento p (que foi criado pelo createElement). O innerHTML adiciona um conteúdo dentro do elemento p, no caso, uma span com uma frase.

No código de teste que vou trouxe, tarefa.appendChild(conteudo) dá erro, pois conteudo não é um filho. O appendChild insere um novo nó na estrutura do DOM de um documento, no caso, um objeto filho anteriormente criado (como em lista.appendChild(tarefa)), mas não acrescenta diretamente uma tag direto no DOM como o innerHTML faz.

para saber mais: https://developer.mozilla.org/pt-BR/docs/Web/API/Node/appendChild

https://developer.mozilla.org/pt-BR/docs/Web/API/Element/innerHTML

Se tiver alguma dúvida é só falar!

por Geovani Granieri
| 909.2k xp | 1038 posts

Olá Diego, tudo bem ?

Realmente, não podemos passar um texto para o appendChild pois ele só recebe elementos do tipo Node que tipicamente são os elementos HTML.

Iremos utilizar então o appendChildpara juntar elementos HTML que geramos, normalmente, com:

  • document.createElement() : Criar um elemento
  • document.createTextNode: Criar um texto puro que não será interpretado como html

, e o innerHTML para colocar um texto dentro do elemento html.

Então quando queremos colocar um texto com template literals que queremos que seja interpretado como html podemos estar utilizando o innerHTML, neste caso iremos trocar tudo.

Quando queremos adicionar algo a um elemento sem trocar tudo, como no caso da lista, iremos criar elementos e utilizar o append para adicionar no final :)

Conseguiu comprender?

Abraços e Bons Estudos!

por diego alves de campos
| 182.5k xp | 26 posts

Entendi, Obrigado pela ajuda pessoal! :)