תכונת innerHTML

תכונת 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 ימשיכו לעבוד)