/

如何使用原生 JavaScript 創建 HTML 屬性

如何使用原生 JavaScript 創建 HTML 屬性

如果你需要在 DOM 中使用原生 JavaScript 為 HTML 元素添加屬性，該怎麼辦呢？

假設你已經使用 querySelector() 選中了一個元素：

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

你可以按照以下步驟為它附加屬性：

  1. 創建屬性
  2. 設置屬性的值
  3. 將屬性附加到元素上

例如：

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

如果該元素尚不存在，則你需要先創建元素，然後創建屬性，再將屬性添加到元素上，最後再將元素添加到 DOM 中：

1
2
3
4
5
6
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)

tags: [“JavaScript”, “DOM”, “HTML”, “屬性”, “原生”]