JavaScript • المستوى الثالث • الدرس 4

إنشاء وإزالة العناصر ديناميكياً (Create & Remove Elements)

أهداف الدرس العلمية

إنشاء عناصر HTML جديدة في الذاكرة باستخدام document.createElement().
إدراج العناصر المنشأة داخل شجرة المستند باستخدام appendChild() أو append().
حذف وإزالة العناصر من الصفحة عبر الميثود remove().
بناء تطبيقات تفاعلية مثل قائمة المهام (To-Do List).

1. كيفية إنشاء عنصر جديد وإدراجه بـ createElement

تتيح لنا جافاسكريبت توليد عناصر برمجية متكاملة وإعطائها خصائص وتنسيقات قبل إضافتها للصفحة:

javascript

// 1. إنشاء العنصر
let newParagraph = document.createElement("p");

// 2. تعيين الخصائص
newParagraph.textContent = "هذه فقرة جديدة تم إنشاؤها بالكامل بـ JS";
newParagraph.style.color = "#3b82f6";

// 3. إدراج العنصر داخل container
document.body.appendChild(newParagraph);

2. إزالة العناصر بـ remove()

لحذف أي عنصر موجود بالصفحة مباشرة بعد حدوث حدث معين، نستخدم الميثود المباشرة remove():

javascript

let oldCard = document.querySelector(".card");

// حذف العنصر مباشرة من الـ DOM
oldCard.remove();

التطبيق العملي المباشر

تحدي الدرس الرابع: إضافة عنصر ديناميكي جديد

قم بكتابة كود JavaScript داخل وسم <script> لتنفيذ الخطوات التالية:

إنشاء عنصر فقرة جديد document.createElement("p") وخزنه في متغير باسم myPara.
تعيين نص للفقرة بـ textContent يكتب فيه: "تم إنشاء العنصر بنجاح!".
إدراج الفقرة داخل العنصر #list باستعمال:
javascript
```
list.appendChild(myPara);
```

محرر الأكواد — HTML

14px

جارٍ تهيئة البيئة...

المخرجات — المخرجات

الكونسول (Console)

13px

nahda@runner — html

0 lines

(لا يوجد إخراج)

HTMLLn 39, Col 1UTF-8Spaces: 2

873 chars

الدرس السابق الانتقال للمستوى الرابع