Maison > Article > interface Web > Comment modifier le texte d'une étiquette en utilisant JavaScript ?

Comment modifier le texte d'une étiquette en utilisant JavaScript ?

WBOYavant: 2023-09-03 23:53:022006parcourir

如何使用 JavaScript 更改标签的文本？

Avant d'apprendre comment modifier le texte de l'élément label dans un document HTML, comprenons d'abord ce qu'est la balise label elle-même ?

La balise

contribue à améliorer la convivialité des pages Web pour les utilisateurs de souris, car elle peut faire basculer le texte qu'elle contient si l'utilisateur clique dessus.

Voyons maintenant comment modifier le texte d'un élément d'étiquette à l'aide de JavaScript.

JavaScript nous permet de modifier le texte de n'importe quel élément d'un document HTML à l'aide de deux propriétés intégrées, comme indiqué ci-dessous -

Utilisez l'attribut innerHTML.
Utilisez l'attribut innerText.

Utiliser l'attribut innerHTML

L'attribut

innerHTML nous permet de modifier ou d'attribuer un nouveau texte en utilisant du HTML, c'est-à-dire que vous pouvez utiliser des balises HTML tout en lui fournissant du nouveau texte et gérer le nouveau texte en fonction de son importance en le définissant à l'aide de différents éléments HTML.

Grammaire

La syntaxe suivante est utilisée pour modifier ou attribuer un nouveau texte à un élément d'étiquette à l'aide de l'attribut innerHTML de JavaScript -

selected_label_element.innerHTML = " new Text ";

Voyons l'implémentation pratique de la modification de la propriété innerHTML du texte de l'élément d'étiquette à l'aide d'un exemple de code JavaScript -

Algorithme

Étape 1 - Dans la première étape, nous ajouterons un élément de balise avec un identifiant au document HTML afin de pouvoir le récupérer en JavaScript et modifier ultérieurement son texte à l'aide de l'attribut innerHTML.
Étape 2 - Dans l'étape suivante, nous ajouterons un élément d'entrée au document pour obtenir le texte saisi de l'utilisateur et remplacerons le texte de l'élément d'étiquette par ce texte. p>
Étape 3 - Dans cette étape, nous ajouterons un élément bouton auquel est associé un événement onclick qui prend une fonction comme valeur et l'appelle lorsque l'utilisateur clique sur le bouton.
Étape 4 - Dans la quatrième étape, nous définirons une fonction personnalisée JavaScript dans laquelle nous modifierons le texte de la balise label à l'aide de la propriété innerHTML comme indiqué dans la syntaxe ci-dessus.
Étape 5 - Dans la dernière étape, nous attribuons la fonction définie à la dernière étape à l'événement onclick défini en association avec l'étiquette du bouton afin qu'il puisse être appelé ultérieurement lorsque le bouton est cliqué.

Exemple

L'exemple ci-dessous expliquera comment utiliser réellement l'attribut innerHTML pour modifier le texte d'un élément label à l'aide de JavaScript -

<html>
<body>
   <h2>Changing the text of a label using JavaScript</h2>
   <p id = "upper"> The text of the below label element will be replaced by the text you enter in input bar once you click the button. </p>
   <label id = "labelText"> This is the initial text inside the label element. </label> <br>
   <input type = "text" id = "inp"> <br> <br>
   <button id = "btn" onclick = "changeText()"> Click to change the Text </button>
   <script>
      var label = document.getElementById("labelText");
      function changeText() {
         var inp = document.getElementById("inp");
         var enteredText = inp.value;
         label.innerHTML = " <b> " + enteredText + ", </b> is the new text of the label element that replaces the previous text, which is entered by you. </b> ";
      }
   </script>
</body>
</html>

Dans l'exemple ci-dessus, nous obtenons d'abord l'élément de balise en utilisant l'ID qui lui est attribué dans le document, puis utilisons la propriété innerHTML pour remplacer le texte par un nouveau texte contenant également la balise HTML.

Utilisez l'attribut innerText

Comme l'attribut innerHTML, l'attribut innerText est également utilisé pour modifier le texte de tout élément HTML présent dans le document HTML. Il est presque similaire à l'attribut innerHTML, la seule différence est qu'il ne permet pas l'utilisation d'éléments HTML contenant du texte. Si vous essayez d'utiliser des éléments HTML avec du texte, il les traitera comme faisant partie du nouveau texte et l'affichera tel quel sur l'écran de l'utilisateur.

Grammaire

La syntaxe suivante vous montrera comment utiliser l'attribut innerText pour modifier le texte d'un élément label -

selected_label_element.innerText = " new Text ";

Comprenons-le en détail et implémentons-le pratiquement à l'aide d'exemples de code JavaScript.

Algorithme

L'algorithme de l'exemple précédent et de cet exemple sont presque similaires. Tout ce que vous avez à faire est d'apporter quelques petites modifications, en remplaçant l'attribut innerHTML par l'attribut innerText dans l'exemple ci-dessus pour modifier le texte.

Exemple

L'exemple suivant illustrera comment utiliser l'attribut innerText pour modifier le texte d'un élément label en JavaScript -

<html>
<body>
   <h2>Changing the text of a label using JavaScript</h2>
   <p id = "upper">The text of the below label element will be replaced by the text you enter in input bar once you click the button.</p>
   <label id = "labelText">This is the initial text inside the label element.</label> <br>
   <input type = "text" id = "inp"> <br> <br>
   <button id = "btn" onclick = "changeText()">Click to change the Text</button>
   <script>
      var label = document.getElementById("labelText");
      function changeText() {
         var inp = document.getElementById("inp");
         var enteredText = inp.value;
         label.innerText = enteredText + ", is the new text of the label element that replaces the previous text, which is entered by you. ";
      }
   </script>
</body>
</html>

Dans cet exemple, nous utilisons JavaScript pour modifier le texte d'un élément label à l'aide de l'attribut innerText de la même manière que nous utilisons l'attribut innerHTML.

Dans cet article, nous avons examiné deux manières différentes de modifier le texte d'un élément de balise dans un document HTML et leur implémentation pratique dans des exemples de code. Dans la précédente, nous avons modifié le texte à l'aide de l'attribut innerHTML, qui permet d'utiliser des éléments HTML pour fournir du texte entre guillemets doubles. Cependant, dans ce dernier cas, nous avons utilisé la propriété innerText, ce qui ne permet pas cela.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Créer une page d'accueil d'application de blog à l'aide d'Angular et MongoDBArticle suivant：Créer une page d'accueil d'application de blog à l'aide d'Angular et MongoDB

Articles Liés

Voir plus