Vamos aprender sobre innerText, textContent e innerHTML. Estas são propriedades que você pode acessar em JavaScript para obter ou alterar o conteúdo de um elemento HTML. Mesmo que possam parecer muito semelhantes à primeira vista, eles têm diferenças-chave. Escolher o correto depende do seu caso de uso específico, então vamos mergulhar nisso. Vamos começar com innerText. innerText representa o conteúdo de texto visível do elemento HTML e seus descendentes. Esta propriedade não inclui texto oculto ou tags HTML, apenas texto renderizado. Por exemplo, aqui você pode ver um elemento div que contém dois parágrafos:

<div id="container">
  <p>Hello, World!</p>
  <p>I'm learning JavaScript</p>
</div>

Se obtivermos uma referência a este elemento HTML no nosso código JavaScript usando getElementById(), podemos acessar a propriedade innerText deste elemento:

<div id="container">
  <p>Hello, World!</p>
  <p>I'm learning JavaScript</p>
</div>
<script src="index.js"></script>

const container = document.getElementById("container");
console.log(container.innerText);

Este é o texto interno deste elemento:

Hello, World!
I'm learning JavaScript

A propriedade retorna uma string com o texto contido dentro do elemento, incluindo o texto de seus descendentes. Você deve saber que innerText retorna apenas o texto que está visível no momento exato em que a string é solicitada. Se um elemento filho estiver oculto, seu texto não ficará visível. Este é um exemplo onde o segundo parágrafo está oculto:

<div id="container">
  <p>Hello, World!</p>
  <p hidden>I'm learning JavaScript</p>
</div>

Se tentarmos registrar o innerText novamente, agora a saída não terá o texto do segundo parágrafo:

<div id="container">
  <p>Hello, World!</p>
  <p hidden>I'm learning JavaScript</p>
</div>
<script src="index.js"></script>

const container = document.getElementById("container");
console.log(container.innerText);

Você pode definir o innerText de um elemento HTML assim, mas isso substituirá o texto existente e adicionará um elemento de quebra de linha (br) para cada quebra de linha:

<div id="container">
  <p>Hello, World!</p>
  <p>I'm learning JavaScript</p>
</div>
<script src="index.js"></script>

const container = document.getElementById("container");
container.innerText = "JavaScript is awesome!";

Como innerText leva em conta a visibilidade, obter seu valor aciona um processo chamado "reflow", que recalcula a posição de certos elementos no site. Este processo pode ser computacionalmente intensivo, então você deve evitar acioná-lo se possível. Ótimo. Agora vamos falar sobre textContent. textContent retorna o conteúdo de texto simples de um elemento, incluindo todo o texto dentro de seus descendentes. A diferença mais importante entre innerText e textContent é que textContent sempre retorna o conteúdo de texto completo de um elemento HTML e seus descendentes, independentemente de estar visível ou oculto. Aqui temos o mesmo exemplo em HTML:

<div id="container">
  <p>Hello, World!</p>
  <p>I'm learning JavaScript</p>
</div>

Se você tentar acessar essa propriedade, verá o texto do elemento e seus descendentes como saída, mantendo a indentação e o espaçamento:

<div id="container">
  <p>Hello, World!</p>
  <p>I'm learning JavaScript</p>
</div>
<script src="index.js"></script>

const container = document.getElementById("container");
console.log(container.textContent);

Se um elemento HTML não estiver visível, como você pode ver aqui, onde ocultamos o segundo parágrafo, seu texto ainda será incluído nesta propriedade:

<div id="container">
  <p>Hello, World!</p>
  <p hidden>I'm learning JavaScript</p>
</div>
<script src="index.js"></script>

const container = document.getElementById("container");
console.log(container.textContent);

textContent também incluirá o conteúdo de elementos como script e style. Se você tentar substituir o valor de textContent em um nó, ele removerá todos os seus nós filhos e os substituirá por um único nó de texto contendo a nova string:

<div id="container">
  <p>Hello, World!</p>
  <p hidden>I'm learning JavaScript</p>
</div>
<script src="index.js"></script>

const container = document.getElementById("container");
container.textContent = "New content";

E finalmente, vamos falar sobre como textContent e innerText diferem de innerHTML. Lembre-se que com innerHTML você pode definir o conteúdo HTML interno de um elemento. Isso é útil para injetar novo HTML no DOM dinamicamente. No entanto, lembre-se de que isso representa um risco de segurança se você não tiver controle sobre a string, como strings contendo dados inseridos pelo usuário. Se esses dados forem maliciosos, eles podem levar a sérios problemas de segurança. Para evitar isso, é recomendado usar a propriedade textContent para inserir texto simples em vez disso. As propriedades innerText, textContent e innerHTML em JavaScript fornecem diferentes maneiras de acessar e manipular o conteúdo dos elementos HTML. Você deve entender as diferenças entre essas propriedades se seu objetivo for trabalhar com conteúdo HTML em JavaScript de forma eficaz.