使用 JavaScript 將 ID 新增到元素
Mehvish Ashiq
2023年10月12日
-
在 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。
作者： Mehvish Ashiq
