إضافة / حذف عناصر في لغة JavaScript

يا هلا بالجميع! اليوم بنشوف كيف نضيف ونحذف عناصر HTML باستخدام JavaScript. الموضوع سهل ومهم جداً للتفاعل مع صفحات الويب.

إضافة عناصر جديدة (Creating and Appending Elements)

عشان نضيف عنصر، نحتاج خطوتين أساسيتين:

1. إنشاء العنصر: نستخدم document.createElement() عشان نسوي العنصر اللي نبغاه.
2. إضافته للصفحة: نستخدم appendChild() أو prepend() عشان نحطه داخل عنصر موجود.

مثال بسيط: إضافة فقرة (paragraph) جديدة:

// 1. إنشاء عنصر فقرة جديد
const newParagraph = document.createElement('p');

// 2. إضافة محتوى نصي للفقرة
newParagraph.textContent = 'هذه فقرة جديدة تمت إضافتها بواسطة JavaScript!';

// 3. تحديد العنصر الأب اللي بنضيف الفقرة له (مثلاً، داخل الـ body)
const bodyElement = document.body;

// 4. إضافة الفقرة كآخر طفل داخل الـ body
bodyElement.appendChild(newParagraph);

ملاحظة: appendChild() يضيف العنصر كآخر طفل. لو تبغاه يكون أول طفل، استخدم prepend().

طيب، لو بغيت أضيف خصائص (attributes) للعنصر؟ مثلاً id أو class؟

نستخدم setAttribute():

const newDiv = document.createElement('div');
newDiv.setAttribute('id', 'myNewDiv');
newDiv.setAttribute('class', 'styled-element important');
newDiv.textContent = 'أنا ديف جديد ومرتب!';

document.body.appendChild(newDiv);

إضافة عناصر في مكان محدد (Inserting Elements)

لو حبيت أضيف عنصر قبل عنصر موجود، نستخدم insertBefore().

هذي الدالة تحتاج عنصرين: العنصر الجديد اللي تبغى تضيفه، والعنصر المرجعي اللي تبغى تضيف قبله.

// عندي عنصر موجود (مثلاً، أول فقرة في الصفحة)
const existingParagraph = document.querySelector('p');

// بإنشئ عنصر جديد (مثلاً، h2)
const newHeading = document.createElement('h2');
newHeading.textContent = 'عنوان فرعي جديد!';
newHeading.style.color = 'green'; // عشان نميزه

// العنصر الأب (واللي هو في الغالب parentNode للعنصر المرجعي)
const parentOfExisting = existingParagraph.parentNode;

// أضف الـ h2 الجديد قبل الفقرة الموجودة
parentOfExisting.insertBefore(newHeading, existingParagraph);

حذف عناصر موجودة (Deleting Elements)

الحذف أسهل من الإضافة في بعض الأحيان! فيه طريقتين شائعتين:

1. removeChild(): تستخدم على العنصر الأب لحذف طفل معين.
2. remove(): تستخدم مباشرة على العنصر اللي تبغى تحذفه.

استخدام removeChild()

هذي الطريقة تتطلب منك معرفة العنصر الأب والعنصر الطفل اللي تبغى تحذفه.

// لنفترض أن لدينا هذا الـ HTML:
// <div id="container">
//   <p id="paragraphToRemove">هذه الفقرة سيتم حذفها.</p>
//   <p>فقرة أخرى.</p>
// </div>

const container = document.getElementById('container');
const paragraphToRemove = document.getElementById('paragraphToRemove');

// تأكد أن العنصر الأب موجود والعنصر الطفل موجود
if (container && paragraphToRemove) {
    container.removeChild(paragraphToRemove);
    console.log('تم حذف الفقرة بنجاح باستخدام removeChild().');
} else {
    console.log('أحد العناصر غير موجود للحذف.');
}

استخدام remove()

هذي الطريقة أسهل بكثير لأنك ما تحتاج تعرف العنصر الأب. العنصر يحذف نفسه بنفسه.

// لنفترض أن لدينا هذا الـ HTML:
// <div id="anotherContainer">
//   <span id="spanToRemove">هذا الـ span سيختفي!</span>
//   <p>نص عادي.</p>
// </div>

const spanToRemove = document.getElementById('spanToRemove');

if (spanToRemove) {
    spanToRemove.remove();
    console.log('تم حذف الـ span بنجاح باستخدام remove().');
} else {
    console.log('الـ span غير موجود للحذف.');
}

نصيحة: remove() هي الطريقة المفضلة والأحدث لحذف العناصر إذا كنت تعرف العنصر الذي تريد حذفه مباشرةً. removeChild() مفيدة إذا كنت تتعامل مع قائمة من الأطفال وتحتاج إلى حذف طفل معين بناءً على مؤشر أو شرط.

وبكذا نكون غطينا أساسيات إضافة وحذف العناصر في JavaScript. الموضوع بسيط وله تطبيقات لا نهائية! بالتوفيق.

← السابقالفهرسالتالي →