אם רוצים להוסיף תוכן למסמך HTML, יש שלוש דרכים לעשות זאת:
- שימוש בשיטות DOM כמו
createNode
ו-appendChild
- שימוש בקטעי מסמכים
- שימוש ב-
innerHTML
אפשר לטעון שיש לנו גם document.write
לתרחישים לדוגמה מסוימים.
השיטה innerHTML
אומצה ב-HTML5, וכך גם השיטה הנוספת insertAdjacentHTML, שפועלת כמו innerHTML
אבל מאפשרת לנו להגדיר באופן ספציפי יותר איפה אנחנו רוצים להוסיף את תוכן ה-HTML: beforeBegin, afterBegin, beforeEnd ו-afterEnd.
var ul = document.getElementById("list");
ul.insertAdjacentHTML("beforeEnd", "<li>A new li on the list.</li>");
בשנת 2008, ג'ון רסיג (John Resig) כתב מאמר על insertAdjacentHTML עם המסקנה הבאה:
עד עכשיו, הבעיה העיקרית ב-insertAdjacentHTML הייתה חוסר התמיכה בדפדפנים. הטמעת insertAdjacentHTML ב-Firefox החל מגרסה 8 תאפשר את השימוש בפונקציה בכל הדפדפנים העיקריים, כולל דפדפנים לנייד. אם רוצים להשתמש בו עכשיו ולוודא שהוא פועל בגרסאות Firefox ישנות יותר מ-8, אפשר להשתמש בpolyfill הזה.