طريقة insertAdjacentHTML() للعنصر DOM HTML Element

تعريف واستخدام

insertAdjacentHTML() الطريقة تدرج رمز HTML في الموضع المحدد.

المواضع الصالحة:

القيمة وصف
afterbegin بعد بدء العنصر (الشخصية الأولى).
afterend بعد العنصر.
beforebegin قبل العنصر.
beforeend قبل انتهاء العنصر (الشخصية الأخيرة).

مثال

مثال 1

إدراج عنصر جديد من نوع <p> بعد عنصر الـ header:

const h2 = document.getElementById("myH2");
let html = "<p>My new paragraph.</p>";
h2.insertAdjacentHTML("afterend", html);

جرب بنفسك

مثال 2

استخدام "afterbegin":

let html = "<span style='color:red'>My span</span>"; h2.insertAdjacentHTML("afterbegin", html);

جرب بنفسك

مثال 3

استخدام "beforebegin":

h2.insertAdjacentHTML("beforebegin", html);

جرب بنفسك

مثال 4

استخدام "beforeend":

h2.insertAdjacentHTML("beforeend", html);

جرب بنفسك

النحو

element.insertAdjacentHTML(position, html)

أو

node.insertAdjacentHTML(position, html)

المعدلات

المعدلات وصف
position

ضروري. موقعية النسبة إلى العنصر:

  • afterbegin
  • afterend
  • beforebegin
  • beforeend
html لإدراج HTML.

دعم المتصفح

جميع المتصفحات يدعمون element.insertAdjacentHTML():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم الدعم