13

Qual a diferença entre usar o innerHTML e o innerText em Javascript? Se eu quero mudar o conteúdo do TEXT_NODE, qual devo usar? Por exemplo:

<p id="p1">I also wrote a book! Read it
    <a href="http://eloquentjavascript.net">here</a>.
</p>

Se eu quero mudar o texto do parágrafo acima, eu usaria desta forma:

var p = document.getElementById("p1");
p.innerHTML="Texto Qualquer";

ou desta? :

var p = document.getElementById("p1");
p.innerText="Texto Qualquer";

Tem alguma diferença? Visualmente eu vi que os dois fazem a mesma coisa.

1
  • O problema é que usando um ou outro o link <a> vai embora.
    – Sam
    Commented 17/09/2018 às 1:41

4 Respostas 4

20

O innerText altera o conteúdo de um elemento de sua página (DOM) com o conteúdo tratado apenas como texto. Por exemplo:

document.getElementById('Teste').innerText = '<b>teste</b>'

Irá exibir:

inserir a descrição da imagem aqui

Já o innerHTML altera o conteúdo de um elemento com o conteúdo tratado como HTML.

Por exemplo, este código:

document.getElementById('Teste').innerHTML = '<b>teste</b>'

Será exibido dessa maneira:

inserir a descrição da imagem aqui

Criei um código no jsFiddle para você poder perceber melhor a diferença entre ambos.

https://jsfiddle.net/brunossn/xpvt214o/803018/

0
7

O innerText pode ser entendindo como:

uma propriedade que representa o conteúdo textual "renderizado" de um nó e seus descendentes. Usada como getter, retorna de maneira aproximada o texto que o usuário obteria caso tivesse selecionado o conteúdo e copiado para a área de transferência

Já o innerHTML:

define ou obtém a sintaxe HTML descrevendo os elementos descendentes.

Logo, em palavras simples, o innerText recupera e define o conteúdo da tag como texto simples, enquanto innerHTML recupera e define o conteúdo em formato HTML.

Veja um exemplo onde pegamos o conteúdo HTML da <div id"innerHTML">:

let innerHTML = document.getElementById('innerHTML').innerHTML;
console.log(innerHTML);
<div id="innerHTML">Texto <span>Mais texto</span></div>

Agora veja esse outro exemplo com innerText, onde só pegamos o texto, sem a tag span, diferentemente do primeiro exemplo:

let innerText = document.getElementById('innerText').innerText;
console.log(innerText);
<div id="innerText">Texto <span>Mais texto</span></div>

Pegando um gancho no seu exemplo da pergunta, caso queira trocar, por um exemplo, o texto de um link poderia usar o innerText. Veja:

var p = document.getElementById("link");
p.innerText="Texto Qualquer";
<p id="p1">I also wrote a book! Read it
    <a id="link" href="http://eloquentjavascript.net">here</a>.
</p>

Caso você quisesse trocar o conteúdo HTML de uma div, ou até mesmo trocar o link de um certo elemento o poderia fazer com o innerHTML.

var p = document.getElementById("p1");
p.innerHTML='<a href="https://pt.stackoverflow.com/questions/329975/innerhtml-vs-innertext">Trocamos o link</a>';
<p id="p1">I also wrote a book! Read it
    .
</p>

Referências:

5

O innerText funciona de forma semelhante ao textContent. O innerHTML pode adicionar ou pegar elementos HTML, já com o innerText isso não é possivel, ele pode apenas atribuir um texto ou pegar o texto de determinado elemento.

0

Neste caso é possível fazer a junção de dois parágrafos, usando o innertext ou o iner HTML? Eu estou tentanto fazer isso e não estou conseguindo.

function juntarMostrar() {

    let texto = document.getElementById("paragrafo1").innerHTML;

    let texto2 = document.getElementsByClassName("area1")[0].innerHTML;

    let juntar = document.querySelectorAll('section'). innerHTML;

    juntar.innerHTML = `${('paragrafo1')} + ${("area1")[0]}`;       
 
    }
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .