Você conhece a diferença entre innerText, textContent e innerHTML?
São utilizados na manipulação do DOM (Document Object Model). Cada uma destas propriedades retorna algo, e descobriremos o que elas retornam neste artigo.
Diferenças:
Utilizando o exemplo a seguir, criaremos as propriedades:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Exemplo innerHTML, innerText e textContent</title>
</head>
<body>
<!-- Criando um parágrafo com formatação CSS inline nos textos -->
<p id="textoHtml">
<span style="display: none">Hakuna</span><strong>Matata</strong>
<span style="visibility: hidden;">Mundo</span>
<span>JS</span>
</p>
<script src="main.js"></script>
</body>
</html>
innerHTML:
Utilizado na manipulação do DOM, o innerHTML retorna todo o texto e o html que existem no elemento. Ele retorna todo o html existente, retornando também às tags, e não somente o texto.
// Criando uma variável que irá buscar o elemento HTML pelo Id
let exemploInner = document.getElementById("textoHtml");
console.log("------ USANDO innerHTML ------");
console.log(exemploInner.innerHTML);
Importante:
O innerHTML pode ser usado para inserção de tags, textos e imagens em uma página web, gerando um risco de segurança. Parecido com um cross-site scripting, mas inofensivo, pois o HTML5 especifica que uma tag <script> inserida via innerHTML em uma página web não deve ser executada. Entretanto, existem formas de executar JavaScript sem usar <script>, portanto, ainda há um risco de segurança ao utilizar o innerHTML. Por esta razão, recomenda-se não utilizar o innerHTML para inserção de texto puro.
innerText:
Já o innerText retorna apenas o texto. Ele ignora todas as tags HTML que estão dentro do elemento, mas ainda assim, “entende” o css do elemento, retornando apenas textos visíveis. Utiliza-se quando queremos buscar apenas o texto visível disponível no elemento.
console.log("------ USANDO innerText ------");
console.log(exemploInner.innerText);
textContent:
O textContent funciona de forma muito semelhante ao innerText, porém, retornando todo o conteúdo de texto, incluindo o texto oculto pelo css, bem como as quebras de linha (\n). Utilizamos o textContent quando queremos buscar todo o texto disponível no elemento.
console.log("------ USANDO textContent ------");
console.log(exemploInner.textContent);
Gostou deste artigo? Compartilhe com seus amigos e comente abaixo!