Element.insertAdjacentHTML()

تعمل طريقة  ()insertAdjacentHTML ل Element

للواجهة على تحليل النص المحدد بتنسيق HTML أو XML وإدراج العقد الناتجة في شجرة DOM في موضع محدد. لا يعيد العنصر الذي يتم استخدامه عليه، وبالتالي لا يفسد العناصر الموجودة داخل هذا العنصر. هذا يتجنب الخطوة الإضافية للتسلسل، مما يجعلها أسرع بكثير من المعالجة المباشر

innerHTML.

بناء الجملة

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

التوافق مع المتصفحات

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
insertAdjacentHTMLChrome Full support 1Edge Full support 17
Full support 17
No support 12 — 17
Notes
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Firefox Full support 8IE Full support 4
Notes
Full support 4
Notes
Notes Before Internet Explorer 10, throws an "Invalid target element for this operation." error when called on a <table>, <tbody>, <thead>, or <tr> element.
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Opera Full support 8Safari Full support 4WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 8Opera Android Full support 10.1Safari iOS Full support 4Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

شاهد أيضا