תכונת innerHTML היא אחת מתכונות שפת JavaScript המבצעת החלפה של ערך שורה אחד ב DOM בערך שורה אחר אחר ב DOM.
ערך שורה חדש יכול להיות זהה מהותית לקודמו כך שמה שמוחלף הוא בהכרח ערך שורה ב DOM אך לא בהכרח תוכן ה HTML שלו.
אם היו JavaScript event listeners שרלוונטים לקטע שהוחלף, הם באופן טבעי לא ישפיעו על הקטע החדש (אפילו אם ה HTML זהה).
לפי דעתי innerHTML
איננה חומר לימוד אלמנטרי לסטודנטים לשפת JavaScript ויש ללמדה רק אחרי תכונות כמו textContent
, innerText
וכן insertAdjacentHTML
- התכונה
textContent
פולטת את התוכן הטקסטואלי של כל אלמנט שהוא (כולל למשלscript
וstyle
) בעוד שהתכונהinnerText
פולטת רק את זה של אלמנטים שבתכנון נועדו להיות "קריאים לבני אדם" (כגוןbody
וילדיו).
יצוין כי innerText
מבדילה בין טקסט חבוי כגון טקסט שקיבל display: none
לבין טקסט שלא כך שהיא לא תציג טקסט שלא
- זהירות ! אם מריצים
innerHTML
על השורה שמכילה את אלמנט ה body כל ה JavaScript event listeners באופן טבעי יפסיקו לעבוד, יש דרך JavaScript לעקוף זאת עם event delegation אך זה המצב הטבעי (הדבר אף יכול לגרום אשלייה שכל תפריט "burger" לא יעבוד אך לא כך הדבר, תפריטי "burger" נטוליי JavaScript שעובדים רק על HTML-CSS ימשיכו לעבוד)
תגובה