Propriété de texte inner dans JavaScript | Expliqué

La propriété InnerText de JavaScript est utilisée pour obtenir ou définir le texte à l'intérieur d'un élément HTML et de ses descendants. Le texte de texte a un phénomène de travail similaire pour innerhtml. Les deux propriétés manipulent le contenu d'un élément HTML mais avec des aspects différents. Le texte inner se concentre sur le contenu textuel et l'InnerHTML considère le contenu HTML d'un élément.

Cet article fournit un aperçu de la propriété InnerText pour atteindre les objectifs suivants.

• Comment fonctionne la propriété InnerText en JavaScript
• Comment utiliser la propriété InnerText dans JavaScript
• Différence entre InnerText et InnerHTML

Comment fonctionne la propriété InnerText en JavaScript

Le fonctionnement du texte inner dépend des syntaxes suivantes.

Pour obtenir le texte d'un élément HTML:

nœud.InnerText;

Pour définir / mettre à jour le texte d'un élément HTML:

nœud.innerText = "texte"

Dans les syntaxes ci-dessus:

• Le nœud fait référence à l'élément HTML et à tous ses descendants.
• Le texte représente le nouveau texte qui serait mis à jour ou mis à la place du texte existant.

Comment utiliser la propriété InnerText dans JavaScript

Les exemples suivants démontrent l'utilisation du texte de texte propriété en html.

Exemple 1: Obtenez le texte d'un élément HTML

Nous avons illustré cet exemple pour montrer comment le texte d'un élément peut être obtenu en utilisant InnerText. propriété.

Html

C'est un exemple de texte de texte

Cliquez ici pour obtenir le texte intérieur

Dans le code ci-dessus, un paragraphe (id = ”P1«) Est créé qui contient un petit Tag et un fort étiqueter. De plus, une fonction get () est appelée sur le clic bouton.

Javascrip

fonction get ()
alerte (document.GetElementByid ("P1").InnerText);

Une fonction nommée obtenir() est créé qui contient un alerte Instruction pour afficher le texte d'un élément (id = ”P1").

Sortir

Il est observé que le texte du paragraphe (id = ”P1«) Et tous ses descendants (Span et Strong) sont affichés.

Exemple 2: Mettez à jour le texte d'un élément HTML

Le code HTML et JS fourni ci-dessous aide à mettre à jour le texte de l'élément.

Html

Ceci est un exemple de propriété InnerText

Cliquez ici pour mettre à jour le texte intérieur

Le code HTML crée un paragraphe avec id = ”P1»Et bouton qui exécute le mise à jour() fonction sur son sur clic propriété.

Javascrip

Function Update ()
document.GetElementByid ("P1").innerText = "Le texte a été mis à jour!"

Le code JavaScript fourni ci-dessus crée une fonction de mise à jour () qui applique la propriété innert texte au paragraphe avec id = ”P1".

Sortir

Il est observé à partir de la sortie que le texte du paragraphe a été mis à jour au nouveau texte.

Exemple 3: Définissez le texte pour un élément HTML

Dans cet exemple, le texte d'un élément sera placé à l'intérieur de l'autre élément et le code suivant aide à le faire.

Html

Bienvenue à Linuxhint

Cliquez ici pour définir le texte intérieur

Le code HTML contient un paragraphe avec id = ”vieux«, Un bouton pour déclencher le ensemble() fonction, et une rubrique avec id = ”nouveau".

Javascrip

fonction set ()
document.GetElementByid ("nouveau").InnerText = Document.GetElementByid ("Old").InnerText;

Le code ci-dessus obtient le texte d'un élément de paragraphe (id = ”vieux«) Et attribue ce texte à l'élément de tête (id =”nouveau").

Sortir

La sortie ci-dessus montre que le texte du paragraphe (id = "vieux») Est défini sur un titre (id =“nouveau»).

Différence entre InnerText et InnerHTML

Le texte de texte et innerhtml peut mettre la confusion dans votre tête. Le texte inner ne considère que le contenu textuel tandis que le innerhtml Fonctions sur le contenu HTML d'un élément qui peut également inclure les balises. Cette section fournit la différence entre InnerText et InnerHTML en utilisant le code suivant.

Html

Bienvenue à Linuxhint

pour InnerText
pour innerhtml

Le code ci-dessus crée une balise de paragraphe et deux boutons. Le premier bouton déclenche le texte() fonction alors que la deuxième fonction exécute le html () fonction.

Javascrip

functionText ()
alerte (document.getElementByid ("texte").InnerText);

functionhtml ()
alerte (document.getElementByid ("texte").innerhtml);

Deux fonctions sont créées qui pratiquent le texte de texte et innerhtml propriétés sur un paragraphe id = ”texte".

Sortir

Il est observé que le innerhtml montre les éléments intérieurs tandis que le texte de texte a seulement récupéré le contenu textuel.

Conclusion

La propriété innerText de JavaScript vous permet d'obtenir ou de mettre à jour / définir le contenu d'un élément HTML. Cet article démontre diverses syntaxes de la propriété InnerText de JavaScript avec des exemples qui transmettent mieux le concept. En parcourant l'article, vous auriez appris à obtenir le texte, à mettre à jour le texte ou à définir un texte sur un élément HTML en utilisant la propriété InnerText de JavaScript. Enfin, nous avons présenté la différence entre InnerText et InnerHTML pour ouvrir le concept dans votre tête.