Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

innerText e textContent

Não ficou claro para mim, para que serve o innerText? e qual a diferença com o textContent? E so para garantir que eu entendi, um componente é só uma função que vai ficar responsavel por uma parte da aplicação? então ele serve para que a varias responsabilidades da aplicação não fique toda em um só lugar, é isso?

4 respostas
solução!

Oi Wesley, este exemplo demonstra algumas das diferenças entre innerText, innerHTML e textContent:

<p id="demo">   This element has extra spacing     and contains <span>a span element</span>.</p>

<script>
function getInnerText() {
  alert(document.getElementById("demo").innerText)
}

function getHTML() {
  alert(document.getElementById("demo").innerHTML)
}

function getTextContent() {
  alert(document.getElementById("demo").textContent)
}
</script>

EXECUTAR O EXEMPLO

Obtenha o conteúdo do elemento

acima com as propriedades especificadas:

innerText retorna: "Este elemento possui espaçamento extra e contém um elemento span."

innerHTML retorna: "Este elemento tem espaçamento extra e contém um elemento span ."

textContent retorna: "Este elemento possui espaçamento extra e contém um elemento span."

A propriedade innerText retorna apenas o texto, sem espaçamento e tags de elemento interno. A propriedade innerHTML retorna o texto, incluindo todos os espaçamentos e tags de elemento interno. A propriedade textContent retorna o texto com espaçamento, mas sem tags de elemento interno.

Fonte: w3school

Eu marquei como solucionado, mas so dps que me deu uma dúvida, em uma aplicação como a diferença entre o innerText e o textContent essa diferença com o espaçamento, poderia ser relevante? .....será que vou te que abrir outro topico agora que eu ja marquei como solucionado?.......

Wesley, foi bom vc ter perguntado. Tem um detalhe importante q não foi mensionado

Ps. Eu prefiro usar o innerText

  • textContents é todo o texto contido por um elemento
  • innerText retorna todo o texto renderizado pelo html

Então no exemplo:

<div class="greeting">
    <style type="text/css">
        p {
            color: rebeccapurple;
        }
    </style>
    <p hidden>This is not rendered.</p>
    <p>Hello world!</p>
</div>

O resultado será:

let text1 = document.querySelector('.greeting').textContent;
/*
p{
color: rebeccapurple;
} 

This is not rendered. 
Hello world!"
*/


let text2 =  document.querySelector('.greeting').innerText;
// "Hello world!"

AHH agora ficou claro a diferemça de cada uma delas, muito obrigado.