JavaScriptでHTML属性を作成・追加する方法を初心者向けに解説

この記事では、JavaScriptを使ってHTML属性を作成し、要素に追加する方法をわかりやすく解説します。

たとえば、クリックすると関数を実行するはずのボタンがWebサイトにあるとします。ところが、そのボタンにはIDもクラスも設定されておらず、しかも今はHTMLファイルに直接アクセスできない状況だとしましょう。

そんなときでも心配いりません。JavaScriptを使えば、新しい属性を作成してボタン要素に動的に追加することができます。

やるべきことは次の3つです。

• id 型の属性を作成する
• 属性に値(名前)を設定する
• 作成した「属性+値」をボタン要素に追加する

HTMLマークアップ

まずは対象となるHTMLのボタンです。残念ながら、まだID属性がありません。

<button>Click me!</button>

JavaScriptでの実装手順

1. ボタン要素を選択する

querySelector() を使ってボタンを取得します。

const button = document.querySelector('button')

補足:

ページ内に複数のボタンがある場合は、セレクターをつなげて指定することで特定のボタンだけを絞り込めます。たとえば、対象のボタンが一意なidやclassを持つdiv要素の中にあるなら、次のように書けます。

const button = document.querySelector('.service-section button')

2. 属性を作成して値を設定する

続いて、id 型の属性を作成します。

const attribute = document.createAttribute('id')

そして、作成した属性に値(名前)を設定します。

attribute.value = `js-button-run-function`

3. 属性をボタン要素に追加する

最後に、新しく作成した属性をボタン要素に追加します。

button.setAttributeNode(attribute)

これで完了です!

ボタンの変数をコンソールに出力してみると、ボタンがアップグレードされていることが確認できます。

console.log(button)

// 出力例: "<button id='js-button-run-function'>Click me</button>"

これで、一意なIDを基準にJavaScriptでこのボタンを選択できるようになり、ユーザーがクリックしたときに実行される関数を作れるようになりました。

動作確認をしてみよう

念のため、正しく動作することを確認しておきましょう。JavaScriptファイルに次のコードを追加してください。

// 新しいidの値でボタンを選択
const buttonRunFunction = document.querySelector('#js-button-run-function')

// クリック時にアラートを表示
buttonRunFunction.addEventListener('click', function() {
	alert('It works!')
})

すべて正しく実装できていれば、ボタンをクリックしたときに "It works!"(動いた!)というアラートが表示されるはずです。

コード全体

ここまでの全コードをまとめると、以下のようになります。

const button = document.querySelector('button')
const attribute = document.createAttribute('id')

attribute.value = `js-button-run-function`

// 新しい属性をボタンに追加
button.setAttributeNode(attribute)

// idを使ってボタンを選択
const buttonRunFunction = document.querySelector('#js-button-run-function')

// クリックイベントを追加
buttonRunFunction.addEventListener('click', function() {
	alert('it works!')
})