Qual a diferença do innerHTML para a propriedade textContent?

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.