כדי להוסיף תוכן למסמך 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, ג'ון רסיג כתב מאמר על InsertAdjacentHTML עם המסקנה הבאה:
עד עכשיו, הבעיה העיקרית ב-insertAdjacentHTML הייתה היעדר תמיכה בדפדפן. כאשר Firefox מטמיע את InsertAdjacentHTML החל מגרסה 8, היא תהיה זמינה בכל הדפדפנים העיקריים, כולל דפדפנים לנייד. אם ברצונך להשתמש בו עכשיו ולוודא שהוא פועל בגרסאות קודמות מ-8 של Firefox, אפשר להשתמש ב-polyfill.