Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] textContent vs InnerHTMl

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto Ingresso Online e atividade Realizando compra para tipo pista

por Renan Batista Fritsch
| 27.9k xp | 9 posts

Na aula, observei o uso do textContent para alterar um valor nas tag do exemplo abaaixo, mas no meu código eu utilizei o innerHTML para alterar ou adicionar um valor na tag. Percebi que ambos funcionam, mas gostaria de entender melhor: qual é a diferença entre eles e em quais situações devo usar um ou outro?

Sei que o curso é focado em lógica, mas gostaria de saber se existe alguma recomendação de boas práticas ou se há alguma diferença de segurança ou desempenho entre os dois métodos.

<ul class="lista">
    <li>Pista<span id="qtd-pista">100</span></li>
    <li>Cadeira superior<span id="qtd-superior">200</span></li>
    <li>Cadeira inferior<span id="qtd-inferior">400</span></li>
</ul>

Agradeço desde já pela ajuda!

1 resposta
solução!
por Rodrigo de Mello Brochado
| 41.1k xp | 34 posts
Senior Fullstack Engineer

Fala Renan, bom dia! Tudo bem?

Dúvida legal, apesar de pro seu caso os dois métodos terem o mesmo resultado, eles tem funções diferentes.

A principal diferença entre eles é que o innerHTML define realmente o HTML dentro do elemento selecionado, então por exemplo você pode adicionar um componente completo HTML utilizando ele em vez de só um texto. Então digamos que você tem uma div, com o innerHTML você pode inserir outra div com um p dentro dessa div inicial, exemplo simples.

Já o textContent, como diz o nome, se refere apenas ao conteúdo em texto, então com ele tudo que você passar no método será tratado como texto puro, se por exemplo escrever como valor:

< p > texto exemplo < / p >

você verá as tags escritas na página, pois ele foi recebido como texto e não como HTML, faz sentido?

Por resumo, o innerHTML é utilizado quando você quer retornar ou alterar os elementos HTML dentro de outro elemento selecionado e o textContent é exclusivo para texto.

Sobre performance, não há diferença relevante nos dois, já em segurança é melhor que você utilize o "textContent" caso for tratar um texto que é dado pelo usuário como num input. Ao utilizar o innerHTML você deixa aberta a possibilidade de um usuário injetar uma tag de script por exemplo, uma vulnerabilidade que pode deixar seu site exposto a ataques.

Espero ter ajudado, qualquer dúvida pode me responder. Bons estudos!