使用 JavaScript 将 ID 添加到元素

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

使用 JavaScript 将 ID 添加到元素

作者：迹忆客最近更新：2023/03/11 浏览次数：

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);