JAVASCRIPT Tutorial

تعديل المحتوى

الخطوات:

  1. تحديد العنصر الذي تريد تعديل محتواه.
  2. استخدام خصائص أو أساليب مثل innerHTML أو textContent أو innerText لتعيين المحتوى الجديد.
  3. إذا كنت تريد إضافة عنصر جديد، فاستخدم createElement وappendChild.
  4. لإزالة عنصر موجود، استخدم removeChild.
  5. لإدراج عنصر قبل عنصر موجود، استخدم insertBefore.

مفاهيم أساسية:

  • innerHTML: يحصل على أو يضبط كامل محتوى عنصر HTML الداخلي (بما في ذلك عناصر HTML الفرعية).
  • textContent: يحصل على أو يضبط محتوى نصي لعنصر HTML (دون تضمين عناصر HTML الفرعية).
  • innerText: مشابه لـ textContent، ولكنه يحترم أنماط العنصر (مثل الإخفاء أو العرض).
  • createElement: ينشئ عنصر HTML جديدًا.
  • appendChild: يضيف عنصرًا تابعًا إلى عنصر موجود.
  • removeChild: يزيل عنصرًا تابعًا من عنصر موجود.
  • insertBefore: يدرج عنصرًا قبل عنصر موجود.

مثال على JavaScript:

// حصول على عنصر العنوان
const title = document.getElementById("title");

// تغيير النص الداخلي
title.textContent = "عنوان جديد";

// إنشاء عنصر فقرة جديد وإضافة نص إليه
const paragraph = document.createElement("p");
paragraph.textContent = "فقرة جديدة";

// إضافة الفقرة الجديدة إلى صفحة الويب
document.body.appendChild(paragraph);