Boa noite! Ainda tenho dúvidas sobre quais situações utilizar o innerHTML e o textContent. Pelo o que entendi, innerHTML será utilizado quando irei acrescentar alguma tag html ou qualquer alteração diretamente no html da página, já o textContent é utilizado só para manipular texto. Alguém poderia esclarecer, por gentileza.
Ola Pedro, Boa noite!
Você está correto em sua compreensão básica sobre innerHTML e textContent.
Vou tentar explicar da melhor maneira. Mas o caminho é esse mesmo "Estudar e perguntar"
innerHTML: Utilizado para obter ou definir o conteúdo HTML de um elemento. Permite inserir tags HTML e alterar a estrutura do DOM. Exemplo:
document.getElementById('myElement').innerHTML = '<strong>Texto em negrito</strong>';
textContent: Utilizado para obter ou definir o conteúdo de texto de um elemento. Insere apenas texto, sem interpretar tags HTML. Exemplo:
document.getElementById('myElement').textContent = 'Texto simples';
Quando usar cada um: Use innerHTML quando você precisa adicionar ou modificar elementos HTML dentro de um elemento existente. Por exemplo, se você precisa adicionar uma lista de itens ou qualquer outro conteúdo que inclua tags HTML.
Use textContent quando você precisa apenas definir ou obter o texto de um elemento, sem a necessidade de adicionar ou interpretar tags HTML. É mais seguro contra injeção de código, pois não interpreta HTML.
<div id="minhaDiv"></div>
<script>
// Usando innerHTML para adicionar HTML
document.getElementById('minhaDiv').innerHTML = '<p>Este é um <strong>parágrafo</strong> com HTML.</p>';
// Usando textContent para adicionar texto simples
document.getElementById('minhaDiv').textContent = 'Este é um texto simples.';
</script>
Espero ter ajudado !