HOWTO · JavaScript
JavaScript を使用して要素に ID を追加する
このチュートリアルでは、JavaScript を使用して HTML 要素に ID 属性を追加する方法を説明します。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は文書内の1つの要素を識別するために使います。別の要素がすでに article-title を使っている場合は、IDが一意になるよう別の値を選んでください。
新しい要素にIDを追加する
document.createElement('p') で要素を作成し、note.id = 'status-note' でIDを設定してから、document.body.append(note) で追加します。ノードを作成しただけでは、ページには表示されません。このコードでは段落が文書の body の末尾に追加されます。テキストやほかの属性も追加時点で設定しておきたい場合は、追加する前に設定してください。
setAttribute() と id プロパティの使い分け
要素のIDを設定するだけなら、element.id = 'profile' と代入する方法が簡潔で直接的です。element.setAttribute('id', 'profile') は汎用的な属性設定メソッドで、コードが属性名を動的に扱う場合に便利です。どちらも同じIDを設定するため、両方を呼び出す必要はありません。.id プロパティは要素の現在のIDを返すので、値を読み取る方法としても分かりやすいものです。
jQueryでIDを追加する
ページにjQueryがすでに読み込まれている場合は、$('#intro').attr('id', 'article-title') で要素を選択してIDを設定できます。これはネイティブDOMの例と同じように、選択した要素のIDを article-title に変更します。$ セレクターと .attr() メソッドを使うには、ページにjQueryを含める必要があります。jQueryが読み込まれていない場合は、上記のネイティブJavaScriptのメソッドを使ってください。
