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