إذا أردنا إدراج محتوى في مستند HTML، فلدينا ثلاث طرق للقيام بذلك:
- استخدام طرق DOM، مثل
createNodeوappendChild - استخدام أجزاء المستند
- جارٍ استخدام
innerHTML
يمكن القول إن لدينا أيضًا document.write لعدد قليل من حالات الاستخدام.
تم توحيد innerHTML في HTML5 وباستخدامه طريقة شقية insertAdjacentHTML والتي تعمل كـ innerHTML ولكنها تسمح لنا بتحديد المكان الذي نريد إدراج محتوى HTML بشكل أكثر تحديدًا فيه: beforeStart وafterStart وbeforeEnd وafterEnd.
var ul = document.getElementById("list");
ul.insertAdjacentHTML("beforeEnd", "<li>A new li on the list.</li>");
في عام 2008، كتب "جون ريسيغ" مقالة حول insertAdjacentHTML كاستنتاج:
حتى الآن، تتمثل المشكلة الرئيسية في insertAdjacentHTML في عدم توافقها مع المتصفح. عندما ينفّذ Firefox تنفيذ insertAdjacentHTML اعتبارًا من الإصدار 8، سيكون متوفّرًا في جميع المتصفحات الرئيسية، بما في ذلك المتصفحات المتوافقة مع الأجهزة الجوّالة. إذا كنت تريد استخدام رمز الاستجابة السريعة الآن والتأكّد من أنّه يعمل مع إصدارات Firefox الأقدم من الإصدار 8، يمكنك استخدام رمز polyfill هذا.