HOWTO · JavaScript
使用 JavaScript 将 ID 添加到元素
本教程演示如何使用 JavaScript 将 ID 属性添加到 HTML 元素。了解多种方法，包括使用 setAttribute 以及直接赋值 ID 属性。探索实用的代码示例和详细说明，提升您的 Web 开发技能。无论是初学者还是经验丰富的开发者都适合。
本页内容
要添加或更改 HTML 元素的 ID，请先选中该元素，再通过 element.setAttribute('id', 'profile') 或 element.id = 'profile' 赋值。新值会替换该元素已有的 ID。请使用在文档中唯一的 ID。
为现有元素添加 ID
先用元素当前的 ID 选中它，再设置新值。例如，如果页面中有 <h2 id="intro">Introduction</h2>，可以用 const heading = document.getElementById('intro') 选中这个实际的 HTML 元素，再通过 heading.setAttribute('id', 'article-title') 更改它的 ID。之后，它的 .id 属性值就是 article-title；要按新 ID 查找该元素，可以使用 document.getElementById('article-title')。
下面的独立 JavaScript 示例使用普通对象演示相同的赋值操作及其打印值。它不会选中或修改 HTML 元素；在网页中操作元素时，请使用上面的 DOM 代码：
const element = { id: 'intro' };
element.id = 'article-title';
console.log(element.id);
article-title
setAttribute() 接收属性名称和值，因此也可以用来设置 id 以外的属性。
一个 ID 应在文档中标识唯一的元素。如果其他元素已经使用了 article-title，请改用另一个值，以确保 ID 不重复。
为新元素添加 ID
使用 document.createElement('p') 创建元素，为它赋值 note.id = 'status-note'，然后用 document.body.append(note) 将它添加到文档中。仅创建节点不会让它显示在页面上。此操作会把段落添加到文档主体的末尾；如果希望它进入文档时就带有所需文本或其他属性，请在添加之前设置这些内容。
选择 setAttribute() 还是 id 属性
要设置元素的 ID，直接赋值 element.id = 'profile' 简单明了。调用 element.setAttribute('id', 'profile') 则使用通用的属性方法，适用于代码需要动态处理属性名称的情况。两种方式设置的是同一个 ID，无需同时调用。.id 属性会返回元素当前的 ID，因此也可以直接用它读取该值。
使用 jQuery 添加 ID
如果页面已经加载 jQuery，可以通过 $('#intro').attr('id', 'article-title') 选中元素并设置它的 ID。这会将所选元素的 ID 更改为 article-title，效果与原生 DOM 示例相同。$ 选择器和 .attr() 方法都需要页面引入 jQuery；如果没有加载该库，请使用上面的原生 JavaScript 方法。
