23- آموزش جاوااسکریپت | ساخت و افزودن عنصر به DOM

HTML استفاده شده در این پست همان HTML پست 19 است یک ul با کلاس collection داریم که شامل چند li با کلاس collection-item است و داخل هر آیتم نیز یک لینک قرار گرفته است

گاهی لازم است به‌جای نوشتن مستقیم HTML، عناصر را با JavaScript بسازیم و بعد آن‌ها را به صفحه اضافه کنیم. این روش در پروژه‌های واقعی خیلی کاربردی است؛ مثلا وقتی می‌خواهیم یک آیتم جدید به لیست اضافه کنیم.

در این مثال، یک li جدید می‌سازیم، به آن کلاس و شناسه می‌دهیم، یک متن داخلش قرار می‌دهیم، سپس یک لینک با آیکن هم به آن اضافه می‌کنیم و در نهایت همه‌چیز را به لیست اصلی می‌فرستیم.

// ساخت عنصر li از صفر
const li = document.createElement('li');

// اضافه کردن کلاس
li.className = 'collection-item';

// اضافه کردن شناسه
li.id = 'new-item';

// اضافه کردن ویژگی دلخواه
li.setAttribute('title', 'New Item');

// ساخت متن
const text = document.createTextNode('Hello World');

// قرار دادن متن داخل li
li.appendChild(text);

// ساخت لینک حذف
const link = document.createElement('a');

// اضافه کردن کلاس‌های لینک
link.className = 'delete-item secondary-content';

// قرار دادن آیکن با HTML
link.innerHTML = '<i class="fa fa-remove"></i>';

// اضافه کردن لینک به li
li.appendChild(link);

// اضافه کردن li به ul
document.querySelector('ul.collection').appendChild(li);

این کد یک عنصر جدید می‌سازد و تمام بخش‌های لازم را به آن اضافه می‌کند.
نکته مهم این است که:

• document.createElement() برای ساخت عنصر جدید استفاده می‌شود.
• document.createTextNode() برای ساخت متن ساده به کار می‌رود.
• appendChild() برای قرار دادن یک عنصر داخل عنصر دیگر استفاده می‌شود.
• setAttribute() برای افزودن ویژگی‌های دلخواه مناسب است.
• innerHTML زمانی کاربرد دارد که بخواهیم HTML را مستقیم داخل یک عنصر قرار دهیم.

اگر بخواهیم این منطق را در یک پروژه واقعی به کار ببریم، معمولا هنگام ثبت فرم یا کلیک روی دکمه، همین ساختار را اجرا می‌کنیم تا آیتم جدید به لیست اضافه شود.