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

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، كتب جون ريسيج مقالة عن insertAdjacentHTML وتضمّنت هذه الخلاصة:

ملاحظة: سيؤدي استخدام المتصفحات لتنفيذ هذه الطريقة إلى تقليل مقدار الرمز البرمجي المطلوب لكتابة مكتبة JavaScript جيدة بشكل كبير. نحن نتطلّع إلى اليوم الذي تصبح فيه هذه الطريقة متاحة على نطاق أوسع (إلى جانب querySelectorAll) حتى نتمكّن من العمل بجدّ وإجراء بعض عمليات تبسيط الرموز البرمجية بشكل جدي.

حتى الآن، كانت المشكلة الرئيسية في insertAdjacentHTML هي عدم توفّر المكوّن في المتصفّحات. مع تنفيذ Firefox لـ insertAdjacentHTML اعتبارًا من الإصدار 8، ستتوفّر هذه الوظيفة في جميع المتصفحات الرئيسية، بما في ذلك متصفّحات الأجهزة الجوّالة. إذا كنت تريد استخدامه الآن والتأكّد من أنّه يعمل في إصدارات Firefox الأقدم من الإصدار 8، يمكنك استخدام العنصر البديل هذا.