إدراج مُجاورHTML في كل مكان

Paul Kinlan

إذا أردنا إدراج محتوى في مستند HTML، تتوفّر لنا ثلاث طرق لإجراء ذلك:

يمكن القول إنّ لدينا أيضًا 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، ستتوفّر هذه الوظيفة في جميع المتصفّحات الرئيسية، بما في ذلك متصفّحات الأجهزة الجوّالة. إذا كنت تريد استخدامه الآن والتأكّد من أنّه يعمل في إصدارات Firefox الأقدم من الإصدار 8، يمكنك استخدام العنصر البديل هذا.