تعمل طريقة ()insertAdjacentHTML ل Element
للواجهة على تحليل النص المحدد بتنسيق HTML أو XML وإدراج العقد الناتجة في شجرة DOM في موضع محدد. لا يعيد العنصر الذي يتم استخدامه عليه، وبالتالي لا يفسد العناصر الموجودة داخل هذا العنصر. هذا يتجنب الخطوة الإضافية للتسلسل، مما يجعلها أسرع بكثير من المعالجة المباشر
بناء الجملة
element.insertAdjacentHTML(position, text);
العوامل
position الموضع
DOMString
يمثل الموضع المتعلق بالعنصر element ؛ يجب أن يكون أحد السلاسل strings التالية:-
'beforebegin'
: قبل العنصرelement نفسه
.'afterbegin'
: داخل العنصرelement
, قبل التابع الأول له (child).'beforeend'
: داخل العنصرelement
, بعد آخر تابع له (child).'afterend'
: بعد العنصرelement
نفسه.
text النص
- السلسلة (string) المطلوب تحليلها كـ HTML أو XML وإدراجها في الشجرة.
تصور مرئي لأسماء المواقع
<!--beforebegin
--><p>
<!--afterbegin
--> foo <!--beforeend
--></p>
<!--afterend
-->
ملحوظة: لا يعمل الوضع قبل البداية والنهاية إلا إذا كانت العقدة في شجرة DOM ولها عنصر أصل.
مثال
// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
//
At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>
ملاحظات
إعتبارات أمنية
عند إدراج HTML في صفحة باستخدام insertAdjacentHTML () ، احرص على عدم استخدام إدخال المستخدم الذي لم يتم تجاوزه.
لا يُنصح باستخدام insertAdjacentHTML () عند إدراج نص عادي ؛ بدلاً من ذلك ، استخدم خاصية Node.textContent
أو طريقة method Element.insertAdjacentText ()
. هذا لا يفسر المحتوى الذي تم تمريره على أنه HTML ، ولكن بدلاً من ذلك يُدرجه كنص خام.
مواصفات
مواصفات | الحالة | تعليق |
---|---|---|
DOM Parsing and Serialization The definition of 'Element.insertAdjacentHTML()' in that specification. |
Working Draft |
التوافق مع المتصفحات
BCD tables only load in the browser
يتم إنشاء جدول التوافق في هذه الصفحة من البيانات المهيكلة. إذا كنت ترغب في المساهمة في البيانات ، يرجى مراجعة https://github.com/mdn/browser-compat-data وإرسال طلب سحب إلينا.
شاهد أيضا
Element.insertAdjacentElement()
Element.insertAdjacentText()
XMLSerializer
: Construct a DOM representation of XML text- hacks.mozilla.org guest post by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.