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:
<a>
vai embora.