انتقل إلى محتوى الدرس
الدرس 48
دورة جافا سكريبت

تعديل العناصر في صفحة HTML بلغة جافا سكريبتJavaScript DOM Set Elements

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

أقسام الدرس
4
الأمثلة
10
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
4,813
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

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

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

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


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

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



Get element contents in JavaScript قراءة محتوي العناصر بلغة جافا سكريبت

يقرأ المحتوي الموجود بداخل عناصر HTML عن طريق لغة الجافا سكريبت بأستخدام خاصية innerText و خاصية innerHTML فقط قم بتحدد العنصر أو العناصر ثم اتبع هذه العملية بالخاصية المناسبة.

قراءة محتوي عنصر عن طريق خاصية innerText

قراءة محتوي عنصر عن طريق خاصية innerText وطباعتهة ويمكنك ايضاً التحقق بالعبارات الشرطيه علي المحتوي الموجود وتتجاهل هذة الخاصية علامة HTML الموجوده بداخل المحتوي.

HTML
let apple = document.getElementById('apple');
document.write("<b>Content " +apple.innerText+ "</b>");

قراءة محتوي HTML عنصر عن طريق خاصية innerText

لا يمكن قراءة محتوي HTML لعنصر عن طريق خاصية innerText سوف يقرأ النصوص فقط.

HTML
let apple = document.getElementById('apple');
document.write("<b>Content " +apple.innerText + "</b>");

قراءة محتوي عنصر عن طريق خاصية innerHTML

قراءة محتوي عنصر عن طريق خاصية innerHTML وطباعتة ويمكنك ايضاً التحقق بالعبارات الشرطيه علي المحتوي الموجود.

HTML
let apple = document.getElementById('apple');
document.write("<b>Content " +apple.innerHTML+ "</b>");

مقارنة بين خاصية innerText و textContent

سوف تقراء خاصية textContent جميع العناصر الداخلية شامله العناصر التي لا تعرض علي المتصفح.

HTML
let apple = document.getElementById('apple');
document.write(apple.innerText);
document.write(apple.textContent);

Update text element content with JavaScript تحديث المحتوي النصي لعنصر بلغة جافا سكريبت

يمكنك التحكم في المحتوي النصي لعنصر عن طريق استخدام خاصية innerText وهي تغيير النص لأي عنصر واستبداله بنص اخر.

خاصية innerText

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

HTML
let apple = document.getElementById('apple');
apple.innerText = "This text updated by JavaScript";

الاحتفاظ بالمحتوي السابق

الاحتفاظ بالمحتوي السابق واضافة المحتوي الجديد بعدة عن طريق خاصية innerText.

HTML
let firstElement = document.getElementById("myheading");
firstElement.innerText += " Closetag.com!";

الاحتفاظ بالمحتوي السابق

الاحتفاظ بالمحتوي السابق واضافة المحتوي الجديد قبلة عن طريق خاصية innerText.

HTML
let firstElement = document.getElementById("myheading");
firstElement.innerText = "Closetag.com!  " + firstElement.innerText ;

Update HTML element content With JavaScript تحديث محتوي HTML عنصر بلغة جافا سكريبت

يمكنك التحكم في محتوي HTML العنصر عن طريق استخدام خاصية innerHTML وهي تغيير محتوي HTML لأي عنصر واستبداله بنصوص أو محتوي HTML اخر.

خاصية innerHTML

عن طريق هذة الخاصية يمكنك التعديل علي أي محتوي HTML بداخل أي عنصر في صفحة HTML بلغة جافا سكريبت.

HTML
let firstElement = document.getElementById("myheading");
firstElement.innerHTML = "<i>Welcome to Closetag.com!</i>";

الاحتفاظ بالمحتوي السابق

الاحتفاظ بالمحتوي السابق واضافة المحتوي الجديد بعدة عن طريق خاصية innerHTML.

HTML
let firstElement = document.getElementById("myheading");
firstElement.innerHTML += "<i>Closetag.com!</i>";

الاحتفاظ بالمحتوي السابق

الاحتفاظ بالمحتوي السابق واضافة المحتوي الجديد قبلة عن طريق خاصية innerHTML.

HTML
let firstElement = document.getElementById("myheading");
firstElement.innerHTML = "<i>Closetag.com! </i> " + firstElement.innerHTML;

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…