如何使用原始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初學者手冊


更多瀏覽器教程: