كيفية استبدال عنصر DOM

بالنظر إلى عنصر DOM ، كيف تستبدله بعنصر آخر؟

لنفترض أن لديك عنصر DOM ، والذي لديك مرجع له (ربما تم استرداده باستخدامquerySelector()).

لاستبداله بعنصر DOM آخر ، يمكنك استدعاءreplaceWith()طريقة على العنصر الأول ، مع تمرير العنصر الثاني كوسيطة:

const el1 = document.querySelector(/* ... */)
const el2 = document.querySelector(/* ... */)

el1.replaceWith(el2)

منذ Edge <17 و IE11لا تدعمه، يجب تحويله إلى ES5 باستخدام Babel إذا كنت تخطط لدعم هذه المتصفحات.

حل آخر هو البحث عن الأصل واستخدامreplaceChild()طريقة أقدم بكثير وتدعمها جميع المتصفحات:

const el1 = document.querySelector(/* ... */)
const el2 = document.querySelector(/* ... */)

el1.parentNode.replaceChild(el2, el1)


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