innerHTML VS innerTEXT - javascript html - Perguntas e Respostas
innerHTML VS innerTEXT – javascript html
6 Dezembro, 2018 admin	0 Comments html, javascript
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?
<p id="p1">I also wrote a book! Read it
<a href="http://eloquentjavascript.net">here</a>.
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? :
p.innerText="Texto Qualquer";
Tem alguma diferença? Visualmente eu vi que os dois fazem a mesma coisa.
Autor da pergunta lineOut
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:
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:
Criei um código no jsFiddle para você poder perceber melhor a diferença entre ambos.
https://jsfiddle.net/brunossn/xpvt214o/803018/
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;
<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");
<a id="link" href="http://eloquentjavascript.net">here</a>.
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.
p.innerHTML='<a href="https://pt.stackoverflow.com/questions/329975/innerhtml-vs-innertext">Trocamos o link</a>';
MDN innerText
MDN innerHTML
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.
← Com CSS da para cortar um texto? Tipo um efeito de texto cortado ou fonte quebrada? – html css html5