diferença innerHTML & textContent

Olá André!

Ótima pergunta! Vou te explicar a diferença entre innerHTML e textContent de uma forma bem clara usando seu exemplo de código:

innerHTML:

• Permite inserir código HTML dentro do elemento
• Interpreta tags HTML como elementos reais
• No seu código, innerHTML = '' está limpando todo o conteúdo HTML dentro do elemento 'lista-produtos'

textContent:

• Trabalha apenas com texto puro
• Trata tags HTML como texto comum, sem interpretá-las
• No seu código, textContent = 'R$ 0,00' está apenas inserindo o texto do valor, sem formatação HTML

Veja esse exemplo prático para entender melhor:

// Usando innerHTML
elemento.innerHTML = '<strong>Olá</strong>';
// Resultado: Olá (em negrito)

// Usando textContent
elemento.textContent = '<strong>Olá</strong>';
// Resultado: <strong>Olá</strong> (mostra as tags como texto)

No seu código, você está usando os dois de forma perfeita:

• innerHTML para limpar a lista de produtos (que provavelmente contém elementos HTML)
• textContent para atualizar o valor total (que é apenas texto simples)

Espero ter ajudado.

Muito boa a explicação! Muito obrigado!!