| الدالة | الوظيفة |
|---|---|
| createElement() | إنشاء عنصر جديد في الذاكرة |
| appendChild() / append() | إضافة عنصر كآخر ابن |
| prepend() | إضافة عنصر كأول ابن |
| remove() | حذف العنصر من الصفحة |
| DocumentFragment | حاوية مؤقتة لتجميع عناصر قبل الإضافة الجماعية |
إلى جانب تعديل عناصر موجودة مسبقاً، تسمح جافاسكريبت بإنشاء عناصر HTML جديدة بالكامل من الصفر عبر الكود، وإضافتها للصفحة، أو حذف عناصر موجودة منها — وهذا أساس بناء تطبيقات ديناميكية مثل قوائم المهام أو التعليقات التي تُضاف دون إعادة تحميل الصفحة.
document.createElement() تُنشئ عنصراً جديداً بالكامل في الذاكرة، لكنه لا يظهر في الصفحة بعد حتى يُضاف صراحة إليها. بعد الإنشاء، يمكنك تعيين محتواه ونمطه وخصائصه بنفس الطرق التي تعلمناها سابقاً (textContent، classList، setAttribute)، قبل إضافته فعلياً للصفحة.
لإضافة العنصر الجديد إلى الصفحة، تستخدم appendChild() لإضافته كآخر ابن لعنصر أب محدد، أو الدالة الأحدث والأكثر مرونة append() التي تقبل أكثر من عنصر أو نص في استدعاء واحد. أما prepend() فتُضيف العنصر كأول ابن. لإدراج عنصر في موضع دقيق نسبة لعنصر آخر (قبله أو بعده تحديداً)، تُستخدم insertBefore() أو الدالة الأحدث insertAdjacentElement/insertAdjacentHTML.
لحذف عنصر من الصفحة، أبسط طريقة حديثة هي استدعاء remove() مباشرة على العنصر نفسه. الطريقة الأقدم كانت تتطلب الوصول للعنصر الأب أولاً ثم استدعاء parentNode.removeChild(العنصر) — وهي لا تزال تعمل لكنها أطول. من المهم الانتباه عند إنشاء عناصر كثيرة داخل حلقة تكرارية إلى استخدام DocumentFragment كحاوية مؤقتة لتجميع كل العناصر أولاً، ثم إضافتها للصفحة دفعة واحدة، لأن هذا يُقلل عدد مرات إعادة رسم الصفحة (Reflow) ويُحسّن الأداء بشكل ملحوظ مقارنة بإضافة كل عنصر على حدة.
| 1 | const عنصر_جديد = document.createElement("li"); |
| 2 | عنصر_جديد.textContent = "مهمة جديدة"; |
| 3 | عنصر_جديد.classList.add("todo-item"); |
| 4 | |
| 5 | document.querySelector("#list").appendChild(عنصر_جديد); |
| 6 | |
| 7 | // حذف عنصر |
| 8 | عنصر_جديد.remove(); |
مثال 1: بناء قائمة مهام ديناميكية كاملة
| 1 | // إضافة عنصر لقائمة عند الضغط على زر |
| 2 | const زر = document.querySelector("#addBtn"); |
| 3 | const القائمة = document.querySelector("#todoList"); |
| 4 | |
| 5 | زر.addEventListener("click", () => { |
| 6 | const عنصر = document.createElement("li"); |
| 7 | عنصر.textContent = `مهمة رقم ${القائمة.children.length + 1}`; |
| 8 | |
| 9 | const زر_حذف = document.createElement("button"); |
| 10 | زر_حذف.textContent = "حذف"; |
| 11 | زر_حذف.addEventListener("click", () => عنصر.remove()); |
| 12 | |
| 13 | عنصر.appendChild(زر_حذف); |
| 14 | القائمة.appendChild(عنصر); |
| 15 | }); |
مثال 2: DocumentFragment لتحسين الأداء
| 1 | // استخدام DocumentFragment لأداء أفضل مع عناصر كثيرة |
| 2 | const المقطع = document.createDocumentFragment(); |
| 3 | const أسماء = ["أحمد", "سارة", "محمد", "ليلى"]; |
| 4 | |
| 5 | أسماء.forEach(اسم => { |
| 6 | const عنصر = document.createElement("li"); |
| 7 | عنصر.textContent = اسم; |
| 8 | المقطع.appendChild(عنصر); // يُضاف للمقطع المؤقت فقط |
| 9 | }); |
| 10 | |
| 11 | document.querySelector("#names").appendChild(المقطع); // إضافة واحدة فقط للصفحة |