資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 JavaScript 更改標籤的文字？
在學習如何更改 HTML 文件中標籤元素文字的方法之前，讓我們先了解一下標籤本身是什麼？
標籤有助於提高滑鼠使用者的網頁可用性，因為它可以切換使用者點選時的內部文字。
現在讓我們討論一下使用 JavaScript 更改標籤元素文字的方法。
JavaScript 允許我們使用兩個內建屬性來更改 HTML 文件中任何元素的文字，如下所示：
使用 innerHTML 屬性。
使用 innerText 屬性。
使用 innerHTML 屬性
innerHTML 屬性允許我們更改或賦值新的文字以及一些 HTML，也就是說，您可以在提供新文字時使用 HTML 標籤，並使用不同的 HTML 元素根據重要性來管理新文字。
語法
以下是使用 JavaScript 的 innerHTML 屬性更改或為標籤元素賦值新文字的語法：
selected_label_element.innerHTML = " new Text ";
讓我們瞭解一下 innerHTML 屬性在使用 JavaScript 程式碼示例更改標籤元素文字時的實際實現：
演算法
步驟 1 - 在第一步中，我們將向 HTML 文件新增一個標籤元素，併為其新增一個 ID，以便稍後在 JavaScript 中獲取它並使用 innerHTML 屬性更改其文字。
步驟 2 - 在下一步中，我們將向文件新增一個輸入元素，以從使用者處獲取輸入文字，並用該文字替換標籤元素的文字。
步驟 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 屬性
innerText 屬性也用於更改 HTML 文件中任何 HTML 元素的文字，就像 innerHTML 屬性一樣。它幾乎與 innerHTML 屬性類似，唯一的區別是它不允許在文字內使用 HTML 元素。如果您嘗試在文字中使用 HTML 元素，它會將它們視為新文字的一部分，並按原樣在使用者螢幕上顯示它們。
語法
下面的語法將向您展示如何使用 innerText 屬性更改標籤元素的文字：
selected_label_element.innerText = " new Text ";
讓我們藉助 JavaScript 程式碼示例詳細瞭解它，在該示例中，它得到了實際的實現。
演算法
上一個示例和這個示例的演算法幾乎相同。您只需執行一些小的更改，即可將上例中的 innerHTML 屬性替換為 innerText 屬性來更改文字。
示例
下面的示例將說明如何在 JavaScript 中使用 innerText 屬性更改標籤元素的文字：
<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>
在這個示例中，我們以與使用 innerHTML 屬性更改標籤元素文字相同的方式使用了 innerText 屬性。
在這篇文章中，我們學習了兩種不同的方法來更改 HTML 文件中標籤元素的文字，並在程式碼示例中進行了實際實現。在前面一種方法中，我們使用 innerHTML 屬性更改文字，該屬性允許使用 HTML 元素作為雙引號內的文字。而在後面一種方法中，我們使用了 innerText 屬性，它不允許這樣做。
5K+ 次檢視
