Não ficou claro pra mim, a diferença entre eles e quando utilizar uma ou outra.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Não ficou claro pra mim, a diferença entre eles e quando utilizar uma ou outra.
Maikon, com innerHTML você pode colocar código HTML dentro do elemento, já com textContent não é possível.
Exemplo:
<h1>Meu Título Principal</h1>var elementoTitulo = document.querySelector('h1')
elementoTitulo.textContent = '<i>Meu Título</i>'No caso acima, você vai alterar o conteúdo do título, e na tela vai aparecer: <i>Meu Título</i>, o browser não interpreta a tag, ela é renderizada como texto puro.
Já no exemplo a seguir, utilizando innerHTML a tag é interpretada pelo browser, e o título é renderizado em itálico:
var elementoTitulo = document.querySelector('h1')
elementoTitulo.innerHTML = '<i>Teste</i>'Em outro exemplo:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>var elementoLista = document.querySelector('ul')
console.log(
elementoLista.textContent
)O console imprime:
"
Item 1
Item 2
Item 3
Item 4
"Já utilizando innerHTML:
var elementoLista = document.querySelector('ul')
console.log(
elementoLista.innerHTML
)"
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
"Então geralmente vamos utilizar o innerHTML quando queremos que o navegador interprete as tags, por exemplo se você precisar gerar itens de lista ou linhas de tabela dinamicamente, e depois colocar dentro de um elemento HTML como uma ul ou uma table.
Perfeito, agora entendi. Valeu pela resposta! Abraços.