JavaScript Academy · درس

تغيير محتوى النص وHTML

حدّثوا المحتوى باستخدام textContent وinnerHTML.

تغيير محتوى النص وHTML درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

قراءة النص وكتابته

لتغيير ما يعرضه عنصر، يمكنك تعيين نصه أو HTML الخاص به. ويعتمد الاختيار الصحيح على حاجتك إلى الترميز وعلى مدى ثقتك بالبيانات.

textContent

تحصل textContent على النص الخام لعنصر أو تعيّنه. ويؤدي تعيينها إلى استبدال جميع الأبناء بعقدة نصية واحدة، كما تتعامل مع الإدخال كنص عادي.

const el = document.querySelector("#status");
el.textContent = "Saved!";

تتعامل textContent مع الترميز كنص عادي

بما أن القيمة نص عادي، يظهر أي HTML في السلسلة حرفيًا ولا تتم معالجته. وهذا يجعلها آمنة ضد الحقن.

el.textContent = "<b>hi</b>";
// displays the literal characters <b>hi</b>

innerHTML

تحصل innerHTML على ترميز HTML داخل عنصر أو تعيّنه. ويؤدي تعيينها إلى تحليل السلسلة بصفتها HTML وإنشاء عقد حقيقية.

const box = document.querySelector("#box");
box.innerHTML = "<strong>Done</strong>";

تستبدل innerHTML كل شيء

يؤدي إسناد قيمة إلى innerHTML إلى التخلص من الأبناء الموجودين وإعادة بناء الشجرة الفرعية انطلاقًا من الترميز الجديد.

box.innerHTML = "<ul><li>One</li><li>Two</li></ul>";

خطر XSS

لا تضع أبدًا إدخالًا غير موثوق من المستخدم داخل innerHTML. فقد تحقن سلسلة ضارة نصوصًا برمجية أو معالجات أحداث، وهذه ثغرة تُسمى XSS.

const userInput = getInput();
// DANGEROUS:
// box.innerHTML = userInput;
// SAFE:
box.textContent = userInput;

innerText

تشبه innerText خاصية textContent، لكنها تراعي الأنماط: فهي تعكس النص المعروض وتتجاهل العناصر المخفية.

console.log(el.innerText); // visible text only

textContent مقارنةً بـ innerText

تعيد textContent كل النص، بما في ذلك المحتوى المخفي، وتكون أسرع لأنها لا تؤدي إلى تشغيل عملية تخطيط. أما innerText فتراعي التخطيط وتكون أبطأ.

el.textContent; // all text, even display:none
el.innerText;   // only what is visually rendered

إلحاق النص بأمان

لإضافة نص من دون حذف العقد الموجودة، أنشئ عقدة نصية أو استخدم insertAdjacentText بدلًا من استبدال textContent.

el.append(document.createTextNode(" extra"));
el.insertAdjacentText("beforeend", " more");

إدراج HTML دون إعادة التحليل

تضيف insertAdjacentHTML الترميز في موضع محدد من دون إعادة تحليل العنصر بأكمله، مما يجعلها أكثر كفاءة من إعادة بناء innerHTML.

box.insertAdjacentHTML("beforeend", "<li>New item</li>");

اختيار الخاصية المناسبة

استخدم textContent للنص العادي (وهو الخيار الآمن الافتراضي)، وinnerHTML فقط مع ترميز موثوق، وinnerText عندما تحتاج تحديدًا إلى النص المعروض والمرئي.

تحقق سريع

اختر الأسلوب الآمن.

مراجعة

تعيّن textContent نصًا عاديًا مُهَرَّبًا، وهي الخيار الآمن الافتراضي. تحلل innerHTML الترميز، لكنها تعرضك لخطر XSS عند استخدام إدخال غير موثوق. وتعكس innerText النص المرئي والمعروض فقط. ولإضافة محتوى، فضّل insertAdjacentHTML/insertAdjacentText على استبدال العنصر بأكمله.

الأسئلة الشائعة

هل درس «تغيير محتوى النص وHTML» مجاني؟

نعم — نص درس «تغيير محتوى النص وHTML» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «تغيير محتوى النص وHTML»؟

حدّثوا المحتوى باستخدام textContent وinnerHTML. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «تغيير محتوى النص وHTML»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy