Algumas semanas atrás, eu estava trabalhando em algo e tive um daqueles 'Aha!' momentos em que algo fazia sentido tão profundo que eu disse a mim mesmo que deveria explorá-lo e escrever sobre ele.

Infelizmente, não me lembro no que estava trabalhando ou em que 'Aha!' momento foi exatamente. Então, vou mergulhar e ver se consigo redescobri-lo.

innerText

No vanilla JavaScript, innerText captura apenas o texto renderizado de um elemento HTML. Em essência, o texto visível no navegador é o que o innerText captura.

HTML

<p id=“example”>This is an <span> example </span>.</p>

JavaScript

var x = document.getElementById(“example”).innerText;

Algumas coisas para ter em mente:

• se os elementos estão ocultos com CSS (usando algo como as propriedades 'display' ou 'visibilidade') innerText não pode acessá-los
• innerText NÃO retornará o conteúdo dos elementos <script> ou <style>

Isso realmente obterá ou definirá o conteúdo interno de um elemento HTML.

Quando ele recupera o conteúdo interno, também inclui qualquer espaçamento e tags de elemento interno, como <li> ou <span>, etc.

HTML

<p id=“example”>This is an <span> example </span>.</p>

var x = document.getElementById(“example”).innerHTML;

Para alterar o conteúdo de um elemento HTML:

document.getElementById(“example”).innerHTML = “And <strong> NOW </strong> the contents have been changed!”;

*** Como innerHTML pode ser usado para alterar o conteúdo de uma página, é possível que tags <script> perigosas e outros ataques de JavaScript sejam executados. ***

*** Portanto, não é recomendado usar innerHTML. ***

Em vez disso, tente usar textContent.

textContent

Isso retornará o conteúdo do texto com espaçamento (semelhante a innerHTML), mas sem nenhuma tag de elemento interno.

Para recuperar o textContent:

HTML

<p id=“example”>This is an <span> example </span>.</p>

var x = document.getElementById(“example”).textContent;

Para definir textContent, basta fazer como no exemplo innerHTML acima.

document.getElementById(“example”).textContent = “And <strong> NOW </strong> the contents have been changed!”;

• retornará o conteúdo de texto de todos os elementos, incluindo <script> e <style>
• irá devolver o texto dos elementos escondidos com CSS