バニラJavascriptを使用してHTML属性を作成する方法

バニラJavaScriptを使用して、DOMのHTML要素に属性を追加する必要がある場合はどうなりますか?

querySelector()を使用して選択した要素があるとします。

const button = document.querySelector('#mybutton')

次の手順に従って、属性をアタッチできます。

  1. 属性を作成する
  2. その値を設定します
  3. 要素に属性を添付します

例:

const attribute = document.createAttribute('id')
attribute.value = `remove-${item.name}`
button.setAttributeNode(attribute)

要素がまだ存在しない場合は、最初に要素を作成し、次に属性を作成し、次に属性を要素に追加し、最後に要素をDOMに追加する必要があります。

const button = document.createElement('button')
const attribute = document.createAttribute('id')
attribute.value = `some-value`
button.setAttributeNode(attribute)
button.textContent = 'Click me'
document.querySelector('.container').appendChild(button)

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のブラウザチュートリアル: