使用 JavaScript 將 ID 新增到元素

Mehvish Ashiq 2023年1月30日 2022年5月1日
  1. 在 JavaScript 中使用 setAttribute() 函式將 id 新增到元素
  2. 使用 JavaScript 將 id 新增到預先存在的元素
  3. 使用 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 屬性的新值,並在控制檯列印以確認它已更改。

現在,idfirstParagraph 更改為 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 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

相關文章 - JavaScript Element