使用 JavaScript 将 ID 添加到元素
Mehvish Ashiq
2023年1月30日
2022年5月1日
-
在 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
。
Author: Mehvish Ashiq