كيفية استخدام insertAdjacentHTML

insertAdjacentHTMLهي طريقة DOM رائعة جدًا يمكننا استدعاء أي عنصر DOM لإضافة محتوى جديد إلى الصفحة.

إنها طريقة لطيفة ومرنة لإدراج محتوى جديد.

يتم استدعاء الأسلوب على عنصر ويقبل معلمتين: الموضع وسلسلة تحتوي على HTML.

هذا مثال:

const item = `<div>
    test
  </div>
`

document.querySelector(’#container’).insertAdjacentHTML(‘afterend’, item)

لاحظ الafterendخيط.

يمثل هذا الموقف الذي سنقوم بإضافة HTML في الحاوية.

لدينا 4 وظائف محتملة:

  • beforebeginقبل العنصر
  • afterbeginقبل الأطفال الأوائل للعنصر
  • beforeendبعد آخر توابع للعنصر
  • afterendبعد العنصر

إليك كيفية إضافة عنصر جديد إلى القائمة:

document.querySelector('ul').insertAdjacentHTML('beforeend', '<li>item</li>')

المزيد من دروس المتصفح:


Tech Wiki على الإنترنت!