Lesson 3 / الدرس 3

Changing what an element says / تغيير ما يقوله العنصر

Two properties write text into an element, and the difference between them is a security decision rather than a style preference.

خاصيتان تكتبان نصًا في عنصر، والفرق بينهما قرار أمني لا تفضيل أسلوبي.

textContent and innerHTML

el.textContent = '<b>hi</b>';    the page shows:  <b>hi</b>
el.innerHTML  = '<b>hi</b>';    the page shows:  hi   (in bold)

textContent  treats the string as TEXT
innerHTML    treats the string as MARKUP and parses it

Both replace everything inside the element. The choice is not about which is more convenient — it is about whether the string could contain markup you did not write. Run the demonstration.

In the last box, a comment became a password field. Nobody wrote that form into this page; a visitor typed it and innerHTML parsed it. That is the cross-site scripting hole from lesson 14 of the web course, and innerHTML is how it gets into a JavaScript program. The line underneath reports whether the onerror the visitor smuggled in also ran: here it usually does not, because this site sends a Content-Security-Policy that refuses inline handlers, and your own page probably sends nothing of the kind. Note what the policy did and did not stop — the code was refused, the fake login form went in regardless, and a form is enough to take a password.

وفي الصندوق الأخير، صار تعليقٌ حقلَ كلمة سر. ولم يكتب أحد ذلك النموذج في هذه الصفحة؛ بل كتبه زائر وحلّله innerHTML. وتلك ثغرة حقن النصوص البرمجية من الدرس 14 في دورة الويب، وinnerHTML هو كيف تدخل برنامج JavaScript. والسطر تحته يبلّغ هل عمل كذلك onerror الذي هرّبه الزائر: وهنا لا يعمل غالبًا، لأن هذا الموقع يرسل Content-Security-Policy يرفض المعالِجات السطرية، وصفحتك أنت على الأرجح لا ترسل شيئًا من ذلك. ولاحظ ما أوقفته السياسة وما لم توقفه — فالشيفرة رُفضت، ودخل نموذج الدخول المزيف رغم ذلك، والنموذج يكفي لأخذ كلمة سر.

The rule, and the exceptions

The string comes from	Use
A person typing into your page	textContent — always
A server response you did not write	textContent
A URL, a query string, localStorage	textContent
A literal you wrote in the file	innerHTML is fine
Markup you built AND data from a person	Build the elements — lesson 5

The last row is the honest answer to "but I need to build markup around user data". Joining strings puts you back in the same hole; creating elements and setting their textContent keeps the two apart by construction, and lesson 5 shows how.

والسطر الأخير هو الجواب الصادق لـ"لكنني أحتاج بناء وسوم حول بيانات المستخدم". فوصل النصوص يعيدك إلى الحفرة نفسها؛ وإنشاء العناصر وضبط textContent لها يفصل الاثنين بالبناء، والدرس 5 يبيّن كيف.

وكلتا الخاصيتين تدمّران كل ما داخل العنصر، بما فيه عناصر تحتفظ بها في متغيّرات وأي مستمعي أحداث مرتبطين بها. فضبط innerHTML على قائمة لإضافة عنصر يرمي بصمت كل مستمع على العناصر القائمة — فتبدو سليمة وتكفّ عن الاستجابة للنقر. وذلك من أصعب العيوب تشخيصًا، والدرس 8 موجود جزئيًا لتجنّبه.

Two smaller properties worth knowing. value is what a form field holds — an <input> has no textContent worth reading, and this catches everyone once. And innerText exists alongside textContent: it respects what is visible, so hidden text is excluded and it costs more to read. Prefer textContent unless you specifically want what a reader can see.

وخاصيتان أصغر تستحقان المعرفة. فـvalue هو ما يحمله حقل نموذج — فـ<input> ليس له textContent يستحق القراءة، وهذا يوقع الجميع مرة. وinnerText موجودة بجانب textContent: فهي تحترم ما هو مرئي، فيُستبعد النص المخفي وتكلّف قراءتها أكثر. فضّل textContent ما لم ترد تحديدًا ما يراه القارئ.

وإن وجدت نفسك تبني نص HTML طويلًا بـ+ ثم تسنده إلى innerHTML، فتوقف واقرأه مرة بحثًا عن قيم جاءت من خارج شيفرتك. فتلك العادة وحدها تمنع أغلب عيوب حقن النصوص البرمجية التي يكتبها المبتدئون، وتستغرق نحو خمس ثوانٍ.

Try it live / جرّب بنفسك

<input id="box" value="<b>hello</b>">
<button id="go">Show</button>
<h3>textContent</h3>
<div id="safe"></div>
<h3>innerHTML</h3>
<div id="unsafe"></div>

<script>
  document.getElementById('go').onclick = function () {
    const typed = document.getElementById('box').value;
    // your two assignments here
  };
</script>

Preview / المعاينة

Check yourself / اختبر نفسك

1. A comment from a visitor contains <img src=x onerror=…>. Which property is safe?

تعليق من زائر يحوي <img src=x onerror=…>. أي خاصية آمنة؟

2. What happens to event listeners inside an element when you set its innerHTML?

ماذا يحدث لمستمعي الأحداث داخل عنصر حين تضبط innerHTML له؟

3. How do you read what someone typed into an <input>?

كيف تقرأ ما كتبه أحد في <input>؟

Your task / مهمتك

Build a page with a text box and two output areas. When the button is pressed, put what was typed into one area with textContent and the other with innerHTML. Then type some markup into the box — a bold tag, and an image with an onerror — and show what each area does. Write a short paragraph on which you would use for a comments section, and why the answer is not "it depends".

ابنِ صفحة بمربع نص ومنطقتي إخراج. وعند ضغط الزر ضع ما كُتب في إحداهما بـtextContent والأخرى بـinnerHTML. ثم اكتب وسومًا في المربع — وسم عريض، وصورة بـonerror — وأظهر ما تفعله كل منطقة. واكتب فقرة قصيرة عن أيهما ستستخدم لقسم تعليقات، ولماذا ليس الجواب "حسب الحالة".

Both properties shown with the same input الخاصيتان معروضتان بالمُدخَل نفسه
Markup typed in, and the difference visible وسوم مكتوبة، والفرق مرئي
A value read from an input with .value قيمة مقروءة من حقل بـ.value
A stated rule for user content قاعدة معلنة لمحتوى المستخدم