使用 JavaScript 更改標籤文字

Mehvish Ashiq 2023年1月30日 2022年5月1日
  1. JavaScript 中的 <label> 是什麼
  2. 使用 .innerHTML 使用 JavaScript 更改標籤文字
  3. 使用 jQuery 的 .text() 方法使用 JavaScript 更改標籤文字
使用 JavaScript 更改標籤文字

本教程介紹如何使用 JavaScript 更改標籤文字。我們將使用 .innerHTML 和 jQuery 的 text() 方法來實現本教程的目標。

那麼,讓我們開始吧!

JavaScript 中的 <label> 是什麼

標籤 (<label>) 是一個 HTML 標籤,我們可以使用它來定義元素的標題或 <input> 元素的文字標籤。你可以在此處找到標籤 (<label>) 標記的不同用途。

使用 .innerHTML 使用 JavaScript 更改標籤文字

HTML 程式碼:

<!DOCTYPE html>
<html>
<head>
	<title>
		Change the Text of A label in JavaScript
	</title>
</head>
<body>
	<label id = "label">
	   Change this text by clicking on the button
	</label>
	<br>
	<button onclick="changeLabelText()">
		Click Here
	</button>
</body>
</html>

JavaScript 程式碼:

function changeLabelText() {
	document.getElementById('label').innerHTML
		= "The text of this label has been changed";
}

輸出(在按下按鈕點選這裡之前):

使用 javascript 更改標籤文字 - 輸出一

輸出(按下按鈕點選這裡後):

使用 javascript 更改標籤文字 - 輸出二

在這裡,我們使用 .innerHTML 屬性並指定在單擊 Click Here 按鈕後顯示的新文字。 .innerHTML 返回 HTML 元素內的字串和駐留在字串內的 HTML/XML 標記,例如空格和換行符等。

我們使用這個屬性來檢視 HTML 元素中的內容——包括任何換行符、間距、格式不規則等。如果文字包含字元 ><&.innerHTML 屬性將作為 HTML 實體返回&`。

我們可以稍微修改一下 JavaScript 程式碼,並在按下按鈕 Click Here 後在舊文字和新文字之間切換。更新後的 JavaScript 程式碼如下:

function changeLabelText() {
	var element = document.getElementById("label");
    if (element.innerHTML == "Change this text by clicking on the button")
    	element.innerHTML = "The text of this label has been changed";
    else 
        element.innerHTML = "Change this text by clicking on the button";
}

輸出:

使用 javascript 更改標籤文字 - 輸出三

使用 jQuery 的 .text() 方法使用 JavaScript 更改標籤文字

HTML 程式碼:

<!DOCTYPE html>
<html>
<head>
	<title>
		Change the Text of A label in JavaScript
	</title>
</head>
<body>
	<label id = "label">
	   Change this text by clicking on the button
	</label>
	<br>
	<button onclick="changeLabelText()">
		Click Here
	</button>
</body>
</html>

JavaScript 程式碼:

function changeLabelText() {
    var label_text = $('#label').text();
	if (label_text === "Change this text by clicking on the button")
        $('#label').text("The text of this label has been changed");
    else 
        $('#label').text("Change this text by clicking on the button");
}

輸出:

使用 javascript 更改標籤文字 - 輸出四

在這裡,我們使用 jQuery 的 text() 方法獲取文字並將其儲存到 label_text 變數中。此外,我們檢查 label_text 的值和型別,並使用 === 運算子將其與 Change this text by click on the button 進行比較。

如果是 true,則將新文字傳遞給 text() 方法;否則,它不是。

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook