InsertAdjacentHTML בכל מקום

Paul Kinlan

אם רוצים להוסיף תוכן למסמך 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 עם המסקנה הבאה:

הערה: אם הדפדפנים יטמיעו את השיטה הזו, כמות הקוד הנדרשת לכתיבה של ספריית JavaScript ראויה תצטמצם באופן משמעותי. אני מחכה ליום שבו השיטה הזו תהיה זמינה באופן נרחב יותר (יחד עם querySelectorAll), כדי שנוכל להשקיע זמן ולפשט את הקוד בצורה משמעותית.

עד עכשיו, הבעיה העיקרית ב-insertAdjacentHTML הייתה חוסר התמיכה בדפדפנים. הטמעת insertAdjacentHTML ב-Firefox החל מגרסה 8 תאפשר את השימוש בפונקציה בכל הדפדפנים העיקריים, כולל דפדפנים לנייד. אם רוצים להשתמש בו עכשיו ולוודא שהוא פועל בגרסאות Firefox ישנות יותר מ-8, אפשר להשתמש בpolyfill הזה.