إذا أردنا إدراج محتوى في مستند 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 هذا.