انتقل إلى محتوى الدرس

innerText VS innerHTML الفرق بين خاصية innerText وخاصية innerHTML

سنتعلم في هذا الدرس كيفية البحث عن عنصر داخل شجرة DOM Tree ثم التعديل وأضافة عناصر أو نصوص بداخله أو التعديل علي أي عناصر متفرعه منه داخل مستند HTML.

1 صفوف تعليمية
جافا سكريبت
4,869 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يمكن التعديل علي محتوي أي عنصر عن طريق ثلاث خصائص وهم:

  • innerText وهي خاصية تمكنك من قراءة وتعديل المحتوي النصي لأي عنصر داخل ملف HTML عن طريق لغة جافا سكريبت.
  • innerHTML وهي خاصية تمكنك من قراءة وتعديل محتوي HTML [أي يشمل علامات HTML ]لأي عنصر داخل ملف HTML عن طريق لغة جافا سكريبت.
  • textContent وهي خاصية تمكنك من قراءة وتعديل المحتوي النصي لأي عنصر داخل ملف HTML عن طريق لغة جافا سكريبت وتشمل جميع العناصر المتفرعه من هذا العنصر حتي وأن كانت غير مرئية علي المتصفح.


هناك عدة فروق بين خاصية innerText و خاصية innerHTML سوف نسردها لكم في الجدول التالي.

innerText innerHTML
تقوم بقراءة وتعديل النصوص فقط لأي عنصر تقوم بقراءة وتعديل محتوي [HTML] لأي عنصر
لا تستطيع أن تضيف عناصر [HTML] بواسطتها تستطيع أن تضيف عناصر [HTML] بواسطتها
تتجاهل المسافات والسطور الأضافية يمكنك أن تضيف مسافات وسطور أضافية
تقوم بأرجاع المحتوي وعدم قراءة وتنفذ أوامر HTML تقوم بأرجاع المحتوي وتقراء وتنفذ أوامر HTML