Comment créer un attribut HTML à l'aide de JavaScript vanille

Et si vous devez ajouter un attribut à un élément HTML dans le DOM, en utilisant du JavaScript vanilla?

Supposons que vous ayez un élément que vous avez sélectionné à l'aide de querySelector ():

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

Vous pouvez lui attacher un attribut en suivant ces étapes:

  1. créer l'attribut
  2. définir sa valeur
  3. attacher l'attribut à l'élément

Exemple:

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

Si l'élément n'existe pas encore, vous devez d'abord le créer, puis créer l'attribut, puis ajouter l'attribut à l'élément, et enfin ajouter l'élément au 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)

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de didacticiels sur le navigateur: