首頁 >web前端 >js教程 >如何使用 JavaScript 更改標籤的文字？

如何使用 JavaScript 更改標籤的文字？

WBOY轉載: 2023-09-03 23:53:022059瀏覽

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

在了解如何變更 HTML 文件中 label 元素的文字的方法之前，讓我們先了解一下 label 標籤本身是什麼？

標籤有助於提高滑鼠使用者的網頁可用性，因為如果使用者點擊它，它可以切換其中的文字。

現在讓我們討論一下使用 JavaScript 更改標籤元素文字的方法。

JavaScript 允許我們使用兩個內建屬性來更改 HTML 文件中任何元素的文本，如下所示 -

使用innerHTML 屬性。
#使用innerText屬性。

#使用innerHTML屬性

innerHTML 屬性允許我們使用一些 HTML 來更改或分配新文本，即您可以在向其提供新文本的同時使用 HTML 標籤，並根據使用不同 HTML 元素定義它的重要性來管理新文本。

文法

以下語法用於使用 JavaScript 的innerHTML 屬性變更或指派新文字到標籤元素 -

selected_label_element.innerHTML = " new Text ";

讓我們了解使用 JavaScript 程式碼範例更改 label 元素文字的 innerHTML 屬性的實際實作 -

演算法

第1 步 - 在第一步驟中，我們將在HTML 文件中新增一個帶有ID 的標籤元素，以便在JavaScript 中抓取它，並稍後使用innerHTML 屬性更改它的文字.
步驟 2 - 在下一步中，我們將向文件添加一個輸入元素，以從用戶獲取輸入文本，並用該文本替換標籤元素的文本。 p>
第3 步驟 - 在此步驟中，我們將新增一個帶有與其關聯的onclick 事件的按鈕元素，該元素將函數作為值，並在使用者點擊按鈕時調用它。
第 4 步 - 在第四步驟中，我們將定義一個 JavaScript 自訂函數，在其中使用 innerHTML 屬性來更改標籤標記的文本，如上面的語法所示。
第5 步驟 - 在最後一步中，我們將在最後一步中定義的函數指派給與按鈕標籤關聯定義的onclick 事件，以便稍後可以呼叫它點擊按鈕。

範例

下面的範例將說明如何實際使用innerHTML屬性來使用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>

在上面的範例中，首先我們使用文件中為其指定的 ID 取得標籤元素，然後使用 innerHTML 屬性將文字變更為新文本，該新文本也包含 HTML 標籤。

使用innerText屬性

與innerHTML 屬性一樣，innerText 屬性也用於變更HTML 文件中存在的任何HTML 元素的文字。它與innerHTML 屬性幾乎相似，唯一的區別是它不允許使用其中包含文字的HTML 元素。如果您嘗試將 HTML 元素與文字一起使用，它會將它們視為新文字的一部分，並按原樣將其顯示在使用者螢幕上。

文法

以下語法將向您展示如何使用innerText屬性來變更標籤元素的文字 -

selected_label_element.innerText = " new Text ";

讓我們藉助 JavaScript 程式碼範例來詳細了解它，並在其中實際實作。

演算法

上一個例子和這個例子的演算法幾乎相似。您只需執行一些小的更改，將上面範例中的innerHTML 屬性替換為innerText 屬性即可變更文字。

範例

下面的範例將說明如何使用innerText屬性來變更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>

在此範例中，我們使用innerText 屬性的方式與使用innerHTML 屬性相同的方式使用JavaScript 來變更標籤元素的文字。

在本文中，我們了解了更改 HTML 文件中標籤元素文字的兩種不同方法及其在程式碼範例中的實際實作。在前一個中，我們使用innerHTML 屬性來更改文本，該屬性允許使用HTML 元素在雙引號內提供文本。然而，在後一個中，我們使用了innerText屬性，但它不允許這樣做。

以上是如何使用 JavaScript 更改標籤的文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：使用 Angular 和 MongoDB 建立部落格應用程式主頁下一篇：使用 Angular 和 MongoDB 建立部落格應用程式主頁

看更多