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

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

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

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

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

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

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

مثال کامل:

const button = document.createElement('button')
const attribute = document.createAttribute('id')
attribute.value = `some-value`
button.setAttributeNode(attribute)
button.textContent = 'Click me'
document.querySelector('.container')(button)

برای دیدن سورس کد به گیت‌هاب من به در اینجا مراجعه کنید.

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