JavaScriptを使用してHTML属性を作成および追加する方法

JavaScriptを使用してHTML属性を作成および追加する方法を学びます。

あなたがそれをクリックしたときに機能を実行することになっているあなたのウェブサイト上のボタンがあるとしましょう。残念ながら、誰かがボタンにIDまたはクラス値を追加するのを忘れており、現在HTMLマークアップに直接アクセスすることはできません。

幸い、JavaScriptを使用して、属性を作成し、それをボタン要素にアタッチすることができます。

3つのことを行う必要があります：

• タイプidの属性を作成します
• 値（名前）を付けます
• 新しい属性と値をボタン要素に追加します

HTMLマークアップ

まず、残念ながらID属性（buhu）がまだないHTMLボタン：

<button>Click me!</button>

JavaScript

querySelector()を使用してボタンを選択します ：

const button = document.querySelector('button')

注：

Webサイトに複数のボタンがある場合は、いつでもセレクターをチェーンで指定できます。たとえば、問題のボタンが一意のIDまたはクラス属性を持つdiv要素内にある場合、例：

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

巻末注。

では、idタイプの属性を作成しましょう。 ：

const attribute = document.createAttribute('id')

そしてそれに値（名前）を付けます：

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

次に、新しく作成した属性をボタン要素にアタッチします：

button.setAttributeNode(attribute)

それでおしまい！

これで、ボタン変数をコンソールに出力すると、ボタンがアップグレードされたことがわかります。

console.log(button)

// output: "<button id='js-button-run-function'>Click me</button>"

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

念のため、機能することを確認しましょう。次のコードをJavaScriptファイルに追加します：

// Select button via its new id value
const buttonRunFunction = document.querySelector('#js-button-run-function')

// On click show an alert box
buttonRunFunction.addEventListener('click', function() {
	alert('It works!')
})

すべてを正しく行うと、「動作します！」という警告ボックスが表示されます。 ボタンをクリックするとポップアップします。

すべてのコード：

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

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

// Attach new attribute to the button
button.setAttributeNode(attribute)

// Select button via its id 
const buttonRunFunction = document.querySelector('#js-button-run-function')

// Add click event to the button
buttonRunFunction.addEventListener('click', function() {
	alert('it works!')
})