使用 JavaScript 將 ID 新增到元素
Mehvish Ashiq
2023年1月30日
2022年5月1日
-
在 JavaScript 中使用
setAttribute()
函式將id
新增到元素 -
使用 JavaScript 將
id
新增到預先存在的元素 -
使用 JavaScript 將
id
新增到新元素
id
屬性在 JavaScript 中起著至關重要的作用,它與適用於 getElementById()
函式的某個元素有關。id
在 HTML 頁面中必須是唯一的,因為它們有助於稍後獲取 HTML 元素的值和內容。
鑑於 id
屬性的重要性,本教程將介紹如何使用 JavaScript 將 id
屬性新增到預先存在的或新的 HTML 元素中。
在 JavaScript 中使用 setAttribute()
函式將 id
新增到元素
對於預先存在的和新的 HTML 元素,使用 setAttribute()
函式和 .id
屬性。setAttribute()
有兩個引數。
第一個是屬性名稱,第二個是屬性的值。例如,第一個引數是 id
,第二個引數可以是任何字串,用於將 id
屬性新增到該特定元素。
另一方面,我們可以直接將 id
屬性的值分配給 .id
屬性。我們將使用以下 HTML 啟動程式碼將 id
新增到預先存在的新元素中。
HTML 程式碼:
<!DOCTYPE html>
<html>
<head>
<title>Add IDs</title>
</head>
<body>
<h1 id="First Heading">My First Heading</h1>
<p id="firstParagraph">My first paragraph.</p>
</body>
</html>
使用 JavaScript 將 id
新增到預先存在的元素
var firstP = document.getElementById("firstParagraph");
firstP.setAttribute("id","firstPracPara");
console.log(document.getElementById("firstPracPara").id);
firstP.id="newPracPara";
console.log(document.getElementById("newPracPara").id);
輸出:
"firstPracPara"
"newPracPara"
我們在上面的程式碼中使用了兩種方式來新增 id
屬性。第一個是 setAttribute()
方法,第二個是 .id
屬性。
首先,我們獲取 id 值為 firstParagraph
的元素,使用 setAttribute()
函式設定 id
屬性的新值,並在控制檯列印以確認它已更改。
現在,id
從 firstParagraph
更改為 firstPracPara
。讓我們使用 .id
屬性再次更改它。
id
的最新值為 newPracPara
;也將其列印在控制檯上以確認。你可以看到上面的輸出。
使用 JavaScript 將 id
新增到新元素
var secondP = document.createElement('p');
secondP.setAttribute('id','secondPara');
console.log(secondP.id);
secondP.id="newPara";
console.log(secondP.id);
輸出:
"secondPara"
"newPara"
在這裡,我們首先使用 createElement()
函式建立一個新元素,然後使用 setAttribute()
方法和 .id
屬性新增 id
。
Author: Mehvish Ashiq