innerHTML VS innerTEXT – javascript html

Pergunta:


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.

Autor da pergunta lineOut

Bruno Soares

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/

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:

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.

Fonte

Related Posts:

Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta: Qual a diferença da AppCompatActivity para Activity ? A partir de qual versão a AppCompatActivity foi adicionada ao Android? Autor da pergunta Luhhh A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta: Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras. Exemplo: 'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta: Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração. Veja o exemplo: class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta: Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta: Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta: No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta: Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta: Vou dar um exemplo para conseguir explicar minha duvida: Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta: Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta: Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta: Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES: ( ...
Porque usar implements? – java android
Pergunta: Qual a diferença entre usar btn.setOnClickListener(new OnClickListener() { e public class MainActivity extends Activity implements OnClickListener{ Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta: O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta: Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada. Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta: Qual a diferença entre Concat() e Union() ? Quando usar Concat() e quando usar Union() ? Somente pode ser usado em list ? ...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *