مетод insertAdjacentHTML() عنصر HTML DOM Element

تعریف و استفاده

insertAdjacentHTML() این روش کد HTML را در موقعیت مشخصی وارد می‌کند.

موقعیت مجاز:

مقدار توضیح
afterbegin پس از شروع عنصر (اولین فرزند).
afterend در عناصر بعد.
beforebegin در عناصر قبل.
beforeend قبل از پایان عنصر (آخرین فرزند).

مثال

مثال 1

در عناصر header یک عنصر جدید <p> وارد کنید:

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.insertAjacentHTML():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی