suchen

Heim >Web-Frontend >js-Tutorial >Wie ändere ich den Text eines Etiketts mit JavaScript?

Wie ändere ich den Text eines Etiketts mit JavaScript?

WBOY
WBOYnach vorne
2023-09-03 23:53:022028Durchsuche

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

Bevor wir lernen, wie man den Text des Label-Elements in einem HTML-Dokument ändert, wollen wir zunächst verstehen, was das Label-Tag selbst ist.

Das

-Tag trägt dazu bei, die Benutzerfreundlichkeit einer Webseite für Mausbenutzer zu verbessern, da es den darin enthaltenen Text umschalten kann, wenn der Benutzer darauf klickt.

Lassen Sie uns nun besprechen, wie Sie den Text eines Etikettenelements mithilfe von JavaScript ändern.

JavaScript ermöglicht es uns, den Text eines beliebigen Elements in einem HTML-Dokument mithilfe von zwei integrierten Eigenschaften zu ändern, wie unten gezeigt -

  • Verwenden Sie das innerHTML-Attribut.

  • Verwenden Sie das innerText-Attribut.

Verwenden Sie das innerHTML-Attribut

Das Attribut „innerHTML“ ermöglicht es uns, mithilfe von HTML neuen Text zu ändern oder zuzuweisen. Das heißt, Sie können HTML-Tags verwenden, während Sie ihm neuen Text zuführen, und den neuen Text entsprechend seiner Wichtigkeit verwalten, indem Sie ihn mithilfe verschiedener HTML-Elemente definieren.

Grammatik

Die folgende Syntax wird verwendet, um einem Beschriftungselement mithilfe des innerHTML-Attributs von JavaScript neuen Text zu ändern oder ihm neuen Text zuzuweisen -

selected_label_element.innerHTML = " new Text ";

Sehen wir uns die praktische Umsetzung der Änderung der innerHTML-Eigenschaft des Beschriftungselementtexts anhand eines JavaScript-Codebeispiels an -

Algorithmus

  • Schritt 1 – Im ersten Schritt fügen wir dem HTML-Dokument ein Tag-Element mit einer ID hinzu, damit wir es in JavaScript erfassen und später seinen Text mithilfe des innerHTML-Attributs ändern können.

  • Schritt 2 – Im nächsten Schritt fügen wir dem Dokument ein Eingabeelement hinzu, um den Eingabetext vom Benutzer zu erhalten und ersetzen den Text des Beschriftungselements durch diesen Text. p>

  • Schritt 3 – In diesem Schritt fügen wir ein Schaltflächenelement mit einem damit verbundenen Onclick-Ereignis hinzu, das eine Funktion als Wert annimmt und diese aufruft, wenn der Benutzer auf die Schaltfläche klickt.

  • Schritt 4 – Im vierten Schritt definieren wir eine benutzerdefinierte JavaScript-Funktion, in der wir den Text des Label-Tags mithilfe der innerHTML-Eigenschaft ändern, wie in der obigen Syntax gezeigt.

  • Schritt 5 - Im letzten Schritt weisen wir die im letzten Schritt definierte Funktion dem in Verbindung mit der Schaltflächenbezeichnung definierten Onclick-Ereignis zu, damit es später beim Klicken auf die Schaltfläche aufgerufen werden kann.

Beispiel

Das folgende Beispiel erklärt, wie man das innerHTML-Attribut tatsächlich verwendet, um den Text eines Beschriftungselements mithilfe von JavaScript zu ändern -

<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>

Im obigen Beispiel rufen wir zunächst das Tag-Element mithilfe der ihm im Dokument zugewiesenen ID ab und verwenden dann die innerHTML-Eigenschaft, um den Text in einen neuen Text zu ändern, der auch das HTML-Tag enthält.

Verwenden Sie das innerText-Attribut

Wie das innerHTML-Attribut wird auch das innerText-Attribut verwendet, um den Text eines beliebigen HTML-Elements im HTML-Dokument zu ändern. Es ähnelt fast dem innerHTML-Attribut, der einzige Unterschied besteht darin, dass es die Verwendung von HTML-Elementen, die Text enthalten, nicht zulässt. Wenn Sie versuchen, HTML-Elemente mit Text zu verwenden, werden diese als Teil des neuen Textes behandelt und auf dem Bildschirm des Benutzers unverändert angezeigt.

Grammatik

Die folgende Syntax zeigt Ihnen, wie Sie das innerText-Attribut verwenden, um den Text eines Beschriftungselements zu ändern -

selected_label_element.innerText = " new Text ";

Lassen Sie es uns im Detail verstehen und mithilfe von JavaScript-Codebeispielen praktisch umsetzen.

Algorithmus

Der Algorithmus des vorherigen Beispiels und dieses Beispiels sind fast ähnlich. Sie müssen nur ein paar kleine Änderungen vornehmen und im obigen Beispiel das innerHTML-Attribut durch das innerText-Attribut ersetzen, um den Text zu ändern.

Beispiel

Das folgende Beispiel veranschaulicht, wie Sie das innerText-Attribut verwenden, um den Text eines Beschriftungselements in JavaScript zu ändern -

<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>

In diesem Beispiel verwenden wir JavaScript, um den Text des Label-Elements mithilfe des innerText-Attributs auf die gleiche Weise zu ändern, wie wir das innerHTML-Attribut verwenden.

In diesem Artikel haben wir uns zwei verschiedene Möglichkeiten angesehen, den Text eines Tag-Elements in einem HTML-Dokument zu ändern, und ihre praktische Umsetzung in Codebeispielen. Im vorherigen Teil haben wir den Text mithilfe des innerHTML-Attributs geändert, das die Verwendung von HTML-Elementen zur Bereitstellung von Text in doppelten Anführungszeichen ermöglicht. Im letzteren Fall haben wir jedoch die Eigenschaft innerText verwendet, die dies nicht zulässt.

Das obige ist der detaillierte Inhalt vonWie ändere ich den Text eines Etiketts mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Erstellen Sie eine Blog-Anwendungs-Homepage mit Angular und MongoDBNächster Artikel：Erstellen Sie eine Blog-Anwendungs-Homepage mit Angular und MongoDB

In Verbindung stehende Artikel

Mehr sehen