أحيانًا نحتاج أثناء برمجة المواقع إلى إضافة عناصر جديدة إلى الصفحة من خلال JavaScript — مثل إنشاء بطاقة منتج، زر، فقرة، أو أي عنصر HTML آخر.
1. إنشاء عنصر جديد باستخدام createElement
let newDiv = document.createElement("div"); // أنشئ عنصر <div>
2. إضافة محتوى داخل العنصر الجديد
newDiv.textContent = "مرحبا بك في موقعي!";
أو يمكنك استخدام:
newDiv.innerHTML = "<strong>مرحبا!</strong>";
3. إضافة خصائص وسمات للعنصر
newDiv.className = "welcome-box";
newDiv.id = "welcome";
4. إدراج العنصر داخل الصفحة
document.body.appendChild(newDiv); // يُضاف في نهاية الـ <body>
أو:
let container = document.getElementById("container");
container.appendChild(newDiv); // يُضاف داخل عنصر معين
5. مثال كامل عملي:
<div id="container"></div>
let message = document.createElement("p");
message.textContent = "تمت إضافتي بالـ JavaScript!";
message.style.color = "green";
document.getElementById("container").appendChild(message);
6. إدراج العنصر قبل أو بعد عنصر معين
قبل عنصر:
parent.insertBefore(newElement, existingElement);
بعد عنصر (باستخدام insertAdjacentElement):
existingElement.insertAdjacentElement("afterend", newElement);
✅ ملخص الدرس:
| الطريقة | الوظيفة |
|---|---|
document.createElement() |
إنشاء عنصر HTML |
element.textContent / innerHTML |
إضافة محتوى داخل العنصر |
element.className / id / style |
ضبط خصائص العنصر |
parent.appendChild() |
إضافة العنصر داخل عنصر آخر |
insertBefore() |
إدراج العنصر قبل عنصر معين |
insertAdjacentElement() |
إدراج العنصر قبل/بعد/داخل عنصر آخر |
