Propriedade InnerText em JavaScript | Explicado

A propriedade InnerText do JavaScript é usada para obter ou definir o texto dentro de um elemento HTML e seus descendentes. O InnerText tem um fenômeno de trabalho semelhante a Innerhtml. Ambas as propriedades manipulam o conteúdo de um elemento HTML, mas com diferentes aspectos. O InnerText concentra -se no conteúdo textual e no Innerhtml considera o conteúdo HTML de um elemento.

Este artigo fornece uma visão da propriedade InnerText para atingir as seguintes metas.

• Como a propriedade InnerText funciona em JavaScript
• Como usar a propriedade InnerText em JavaScript
• Diferença entre o InnerText e Innerhtml

Como a propriedade InnerText funciona em JavaScript

O funcionamento do InnerText depende das seguintes sintaxes.

Para obter o texto de um elemento HTML:

nó.InnerText;

Para definir/atualizar o texto de um elemento HTML:

nó.INNERTEXT = "Texto"

Nas sintaxes acima:

• O nó refere -se ao elemento HTML e a todos os seus descendentes.
• O texto representa o novo texto que seria atualizado ou definido no lugar do texto existente.

Como usar a propriedade InnerText em JavaScript

Os exemplos a seguir demonstram o uso do InnerText Propriedade em HTML.

Exemplo 1: Obtenha o texto de um elemento HTML

Ilustramos este exemplo para mostrar como o texto de um elemento pode ser obtido usando o InnerText. propriedade.

Html

Isto é um exemplo de InnerText

Clique aqui para obter o INnerText

No código acima, um parágrafo (id = ”P1“) É criado que contém um pequeno tag e a forte marcação. Além disso, uma função get () é chamada com o clique do botão.

JavaScript

função get ()
Alerta (documento.getElementById ("P1").INnerText);

Uma função chamada pegar() é criado que contém um alerta Declaração para exibir o texto de um elemento (id = ”P1").

Saída

Observa -se que o texto do parágrafo (id = ”P1“) E todos os seus descendentes (span e forte) são exibidos.

Exemplo 2: Atualize o texto de um elemento HTML

O código HTML e JS fornecido abaixo auxilia na atualização do texto do elemento.

Html

Este é um exemplo de propriedade InnerText

Clique aqui para atualizar o InnerText

O código HTML cria um parágrafo com id = ”P1”E botão que executa o atualizar() função em seu ONCLICK propriedade.

JavaScript

função update ()
documento.getElementById ("P1").INNERTEXT = "O texto foi atualizado!";

O código JavaScript fornecido acima cria uma função update () que aplica a propriedade InnerText ao parágrafo com id = ”P1““.

Saída

Observa -se a partir da saída que o texto do parágrafo foi atualizado para o novo texto.

Exemplo 3: defina o texto para um elemento HTML

Neste exemplo, o texto de um elemento será colocado dentro do outro elemento e o seguinte código auxilia a fazê -lo.

Html

Bem -vindo ao Linuxhint

Clique aqui para definir o InnerText

O código HTML contém um parágrafo com id = ”velho“, Um botão para acionar o definir() função e um título com id = ”novo““.

JavaScript

função set ()
documento.getElementById ("novo").INNERTEXT = documento.getElementById ("Old").InnerText;

O código acima recebe o texto de um elemento de parágrafo (id = ”velho“) E atribui este texto ao elemento de cabeçalho (id =”novo").

Saída

A saída acima mostra que o texto do parágrafo (id = “velho”) Está definido como um título (id =“novo”).

Diferença entre o InnerText e Innerhtml

O InnerText e Innerhtml Pode colocar confusão na sua cabeça. O InnerText considera apenas o conteúdo textual, enquanto o Innerhtml funções no conteúdo html de um elemento que pode incluir as tags também. Esta seção fornece a diferença entre o InnerText e o InnerHTML usando o seguinte código.

Html

Bem-vindo ao Linuxhint

para InnerText
para innerhtml

O código acima cria uma etiqueta de parágrafo e dois botões. O primeiro botão desencadeia o texto() função enquanto a segunda função executa o html () função.

JavaScript

functionText ()
Alerta (documento.getElementById ("texto").INnerText);

functionHtml ()
Alerta (documento.getElementById ("texto").innerhtml);

São criadas duas funções que praticam o InnerText e Innerhtml Propriedades em um parágrafo ID = ”texto““.

Saída

Observa -se que o Innerhtml mostra os elementos internos, enquanto o InnerText Recuperou apenas o conteúdo textual.

Conclusão

A propriedade InnerText do JavaScript permite que você obtenha ou atualize/defina o conteúdo de um elemento HTML. Este artigo demonstra várias sintaxes da propriedade InnerText do JavaScript com exemplos que transmitem melhor o conceito. Ao passar pelo artigo, você teria aprendido a obter o texto, atualizar o texto ou definir um texto para um elemento HTML usando a propriedade InnerText do JavaScript. Por fim, apresentamos a diferença entre o InnerText e o Innerhtml para pavimentar o conceito em sua cabeça.