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；之後可使用 document.getElementById('article-title') 依新 ID 找到它。
以下獨立的 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 方法。
