使用 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