Comment modifier le texte de l'étiquette à l'aide de JavaScript
En train de remplir un formulaire ou un questionnaire particulier, il existe souvent des situations où il est nécessaire d'afficher une réponse ou une notification particulière en réponse à l'option sélectionnée. Par exemple, traitant des questions à choix multiples, etc. Dans de tels cas, la modification du texte de l'étiquette à l'aide de JavaScript est très utile pour améliorer l'accessibilité des formulaires HTML et la conception globale du document.
Comment modifier le texte de l'étiquette à l'aide de JavaScript?
Les approches suivantes peuvent être utilisées pour modifier le texte de l'étiquette en JavaScript:
-
- "innerhtml" propriété.
- "texte de texte" propriété.
- jQuery "texte()" et "html ()«Méthodes.
Approche 1: Modifier le texte de l'étiquette en JavaScript à l'aide d'une propriété innerhtml
Le "innerhtml»La propriété renvoie le contenu HTML intérieur d'un élément. Cette propriété peut être utilisée pour récupérer l'étiquette spécifique et changer son texte en une valeur de texte nouvellement attribuée.
Syntaxe
élément.innerhtml
Dans la syntaxe ci-dessus:
-
- "élément»Fait référence à l'élément sur lequel la propriété spécifique sera appliquée pour retourner son contenu HTML.
Exemple
Parcourez l'extrait de code suivant pour expliquer clairement le concept déclaré:
-
- Tout d'abord, dans le «”Tag, incluez le«étiqueter"Avec le spécifié"identifiant" et "texte" valeurs.
- Après cela, créez un bouton avec un "sur clic»Événement invoquant la fonction LabelText ().
Maintenant, suivez le code JavaScript donné ci-dessous:
function labeltext ()
Let Get = Documer.GetElementByid ('LBL')
obtenir.innerhtml = "Le nom abrégé est modèle d'objet de document";
-
- Déclarer une fonction nommée «LabelText ()".
- Dans sa définition, accédez à l'ID du spécifié "étiqueter" en utilisant le "document.getElementByid ()" méthode.
- Enfin, appliquez la propriété innerhtml et attribuez un nouveau «texte»Valeur à l'étiquette accessible. Cela entraînera la transformation du texte de l'étiquette en une nouvelle valeur de texte sur le bouton cliquer.
Sortir
Dans la sortie ci-dessus, on peut observer que la valeur du texte de «étiqueter"Est modifié à la fois sur le DOM et dans le code dans le"Éléments" section.
Approche 2: Modifier le texte de l'étiquette en JavaScript à l'aide de la propriété intertexte
Le "texte de texte»La propriété renvoie le contenu du texte de l'élément. Cette propriété peut être implémentée pour allouer une valeur d'entrée utilisateur saisie dans le champ d'entrée au texte de l'étiquette attribuée.
Syntaxe
élément.texte de texte
Dans la syntaxe ci-dessus:
-
- "élément»Indique l'élément sur lequel la propriété spécifique sera appliquée pour retourner son contenu textuel.
Exemple
L'exemple suivant démontre le concept déclaré:
Entrez un nom:
-
- Tout d'abord, allouer un champ de texte d'entrée ayant le spécifié "identifiant". Le "nul«La valeur ici indique que la valeur sera récupérée de l'utilisateur et définit la saisie semi-automatique à«désactivé«Évitera les valeurs suggérées.
- Après cela, incluez une étiquette ayant le spécifié "identifiant" et "texte" valeur.
Maintenant, dans l'extrait de code JavaScript, effectuez les étapes suivantes:
function labeltext ()
Let Get = Documer.getElementById ('LBL');
Let Name = Document.getElementByid ('name').valeur;
obtenir.innerText = name;
-
- Définissez une fonction nommée «LabelText ()". Dans sa définition, accédez à l'étiquette créée à l'aide du «document.getElementByid ()" méthode.
- De même, répétez l'étape ci-dessus pour accéder au champ de texte d'entrée spécifié et obtenir la valeur intentée par l'utilisateur à partir de celui-ci.
- Enfin, attribuez la valeur entre l'utilisateur de l'étape précédente à l'étiquette récupérée. Cela modifiera le texte de l'étiquette en valeur intentée par l'utilisateur dans le champ de texte d'entrée.
Sortir
Dans la sortie ci-dessus, il est évident que l'exigence souhaitée est obtenue.
Approche 3: Modifier le texte de l'étiquette en javascript à l'aide des méthodes jQuery Text () et HTML ()
Le "texte()»La méthode renvoie le contenu texte des éléments sélectionnés.Le "html ()»La méthode renvoie le contenu innerhtml des éléments sélectionnés.
Syntaxe
$ (sélecteur).texte()
Dans cette syntaxe:
-
- "sélecteur»Porte le contenu texte de l'élément accessible.
$ (sélecteur).html ()
Dans la syntaxe donnée ci-dessus:
-
- "sélecteur»Fait référence à l'innerhtml de l'élément accessible.
Exemple
Cet exemple illustrera le concept déclaré en utilisant des méthodes jQuery.
Passez par l'extrait de code ci-dessous:
-
- Tout d'abord, incluez le «jquery»Bibliothèque pour appliquer ses méthodes.
- Après cela, dans le ««Tag, incluez deux étiquettes différentes avec le« spécifié »identifiant»Et la valeur du texte contre chacun d'eux.
- Autorisation des boutons séparés à chacune des étiquettes créées. Les deux boutons auront un attaché «sur clic”Événement invoquant deux fonctions spécifiées différentes.
Maintenant, passez par les lignes de code JavaScript suivantes:
function labeltext ()
$ ('# lbl1').Texte ("Linuxhint")
Fonction LabelText2 ()
$ ('# lbl2').html ("javascript")
-
- Dans la première étape, déclarez une fonction nommée «LabelText ()".
- Dans sa définition, accédez à l'étiquette contre le récupéré "identifiant»Et appliquez le«texte()»Méthode. Cela entraînera la modification de la valeur du texte de l'étiquette en valeur spécifiée dans son paramètre.
- De même, définissez une fonction nommée «LabelText2 ()".
- Ici, de même, répétez l'étape ci-dessus pour accéder à l'étiquette. Dans ce cas, appliquez le «html ()" méthode. Cette méthode fonctionnera également de la même manière et renvoie la valeur de texte spécifiée modifiant ainsi le texte de l'étiquette.
Sortir
Dans la sortie ci-dessus, la première valeur de texte transformée de l'étiquette sur le modèle d'objet de document (DOM) correspond à la jQuery "texte()«Méthode et l'autre est le résultat du«html ()" méthode.
Nous avons compilé les approches pour modifier le texte de l'étiquette en utilisant JavaScript.
Conclusion
Le "innerhtml»Propriété, le«texte de texte«Propriété, ou jQuery»texte()" et "html ()«Les méthodes peuvent être utilisées pour modifier le texte de l'étiquette à l'aide de JavaScript. La propriété InnerHTML peut être appliquée pour obtenir l'étiquette spécifique et modifier son contenu texte en une valeur de texte nouvellement attribuée. La propriété InnerText peut être implémentée pour allouer une nouvelle valeur de texte à l'étiquette accessible en le modifiant ainsi. L'approche jQuery peut être utilisée pour transformer la valeur du texte de l'étiquette à l'aide de ses deux méthodes résultant en le même résultat sous la forme de deux valeurs de texte allouées différentes. Cet article a démontré les techniques pour modifier le texte de l'étiquette à l'aide de JavaScript.