ساخت HTML attribute با جاوااسکریپت

فرض کنید که لازمه که یک attribute برای یک element در HTML بسازید، و چاره ای جز نوشتن با جاوااسکریپت خالص ندارید. چطور انجامش بدیم؟

بیان فرض کنیم یک button داریم که یک آی‌دی دارد، با استفاده از متد زیر انتخابش می‌کنیم:

javascript

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

برای اضافه کردن attribute یا ویژگی به اون مراحل زیر رو اجرا می‌کنیم:

  • ساخت attribute مورد نظر
  • مقدار یا value اون رو مشخص می‌کنیم
  • attribute رو به element اضافه می‌کنیم

مثال:

javascript

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

در صورتی که element مورد نظر هم وجود نداشت، اول اون المنت رو می سازیم و بعد attribute خودمون رو بهش می‌دیم.

مثال کامل:

javascript

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)

دیگر آموزش‌های جاوا اسکریپت