如果你需要在 DOM 中使用原生 JavaScript 為 HTML 元素添加屬性,該怎麼辦呢?
假設你已經使用 querySelector() 選中了一個元素:
const button = document.querySelector('#mybutton')
你可以按照以下步驟為它附加屬性:
- 創建屬性
- 設置屬性的值
- 將屬性附加到元素上
例如:
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)