در جاوا اسکریپت، توسعه دهندگان باید بتوانند به صورت پویا یک صفحه را بدون جایگزینی کل محتوا به روز کنند. یک روش سنتی مانند innerHTML می تواند باعث مشکلات عملکرد شود، زیرا این روش ها تمایل دارند کل محتوای یک عنصر را جایگزین کنند.

متد insertAdjacentHTML() منجر به عملکرد بهتری می شود زیرا از آن برای درج پویا محتوای جدید HTML بدون تأثیر بر محتوای موجود استفاده می کنید.

در این آموزش به موارد زیر می پردازیم:

مقدمه ای بر متد insertAdjacentHTML()

نحو متد insertAdjacentHTML()

گزینه های قرار دادن در متد insertAdjacentHTML()

پشتیبانی مرورگر از متد insertAdjacentHTML()

بهترین روش ها برای استفاده از متد insertAdjacentHTML()

نتیجه

مقدمه ای بر متد insertAdjacentHTML()

متد insertAdjacentHTML() راهی کارآمد برای دستکاری ساختار صفحه وب بدون جایگزینی تمام محتوای یک عنصر ارائه می دهد. همچنین این روش برای درج عناصر HTML یا عناصر متنی در یک موقعیت خاص است.

insertAdjacentHTML روشی در جاوا اسکریپت است که به شما امکان می دهد عناصر یا متن HTML را در یک موقعیت خاص نسبت به یک عنصر معین در DOM (مدل شیء سند) درج کنید. این روش انعطاف پذیری را در دستکاری ساختار یک صفحه وب به صورت پویا فراهم می کند.

نحو متد insertAdjacentHTML()

نحو متد insertAdjacentHTML() به این صورت است:

 HTMLelement.insertAdjacentHTML(position, element);

متد insertAdjacentHTML دو پارامتر دارد:

موقعیت: این پارامتر یک نمایش رشته ای از جایی است که HTML جدید باید در رابطه با targetElement درج شود. باید با یکی از رشته های زیر مطابقت داشته باشد:

"beforebegin" : مقدار رشته beforebegin متد insertAdjacentHTML() عنصر HTML را بلافاصله قبل از عنصر مشخص شده در DOM وارد می کند.

"afterbegin" : مقدار رشته afterbegin متد insertAdjacentHTML() عنصر HTML را در داخل targetElement وارد می کند، درست قبل از اولین فرزند آن.

"beforeend" : beforeend یک مقدار رشته ای از متد insertAdjacentHTML() است که یک عنصر HTML را بعد از آخرین فرزند آن در داخل targetElement وارد می کند.

"afterend" : مقدار رشته afterend متد insertAdjacentHTML() یک عنصر HTML را بلافاصله بعد از عنصر مشخص شده در DOM وارد می کند.

2. عنصر: عنصری که باید در درخت DOM درج شود.

گزینه های قرار دادن در متد insertAdjacentHTML()

حالا که چهار پارامتر ممکن متد insertAdjacentHTML() را دیدید، بیایید ببینیم که چگونه با کد کار می کنند.

beforebegin : در اینجا یک مثال با استفاده از پارامتر beforebegin در کد آورده شده است:

 const targetElement = document.querySelector('h1'); targetElement.insertAdjacentHTML('beforebegin', '<h2>Lawal</h2>');

در اینجا خروجی است:

از شروع" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2024/02/beforebegin.png 600w, https://www.freecodecamp.org/news/content/images/2024/02/beforebegin.png 699w" width="699" height="105" loading="lazy">

به یاد بیاورید که مقدار رشته beforebegin متد insertAdjacentHTML() عنصر HTML را بلافاصله قبل از عنصر مشخص شده در DOM وارد می کند.

در نتیجه کد بالا، عنصر HTML تازه درج شده ما h3 قبل از targetElement h2 ما درج شد. من targetElement خود را با گفت ن یک حاشیه به آن برای تصویرسازی آسان استایل دادم.

afterbegin : در اینجا مثالی از استفاده از پارامتر afterbegin در کد آورده شده است:

 const targetElement = document.querySelector('h1'); targetElement.insertAdjacentHTML('afterbegin', '<h2>Lawal</h2>');

و این هم خروجی:

از شروع" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2024/02/afterbegin.png 600w, https://www.freecodecamp.org/news/content/images/2024/02/afterbegin.png 765w" sizes="(min-width: 720px) 720px" width="765" height="163" loading="lazy">

همانطور که در بالا تعریف شد، مقدار رشته afterbegin متد insertAdjacentHTML() عنصر HTML را در داخل targetElement وارد می‌کند، درست قبل از اولین فرزند آن.

با تحلیل خروجی کد ما، ممکن است متوجه شوید که عنصر HTML تازه درج شده h3 در داخل targetElement h2 ما درج شده است. دوباره، من targetElement خود را با اضافه کردن یک حاشیه به آن برای تصویرسازی آسان، استایل دادم.

beforeend : در اینجا مثالی از استفاده beforeend در کد آورده شده است:

 const targetElement = document.querySelector('h1'); targetElement.insertAdjacentHTML('beforeend', '<h2>Lawal</h2>');

و این هم خروجی:

از پایان" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2024/02/beforeend.png 600w, https://www.freecodecamp.org/news/content/images/2024/02/beforeend.png 764w" sizes="(min-width: 720px) 720px" width="764" height="157" loading="lazy">

تعریف کلی beforeend این است که این یک مقدار رشته ای از متد insertAdjacentHTML() است که یک عنصر HTML را در داخل targetElement ، بعد از آخرین فرزند آن وارد می کند.

از نتیجه کد، عنصر HTML تازه درج شده ما h3 بعد از فرزندش در داخل targetElement h2 ما درج شد. من targetElement خود را با گفت ن یک حاشیه به آن برای تصویرسازی آسان، استایل دادم.

afterend : در اینجا مثالی از استفاده از aferend در کد آورده شده است:

 const targetElement = document.querySelector('h1'); targetElement.insertAdjacentHTML('afterend', '<h2>Lawal</h2>');

و این هم خروجی:

از پایان" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2024/02/afterend.png 600w, https://www.freecodecamp.org/news/content/images/2024/02/afterend.png 772w" sizes="(min-width: 720px) 720px" width="772" height="91" loading="lazy">

همانطور که می دانید، afterend یک مقدار رشته ای از متد insertAdjacentHTML() است که یک عنصر HTML را بلافاصله بعد از عنصر مشخص شده در DOM وارد می کند.

در کد بالا، عنصر HTML تازه درج شده ما h3 بلافاصله بعد از targetElement h2 ما درج شد. من targetElement خود را با گفت ن یک حاشیه به آن برای تصویرسازی آسان، استایل دادم.

پشتیبانی مرورگر از متد insertAdjacentHTML()

متد insertAdjacentHTML() روشی است که به طور گسترده پشتیبانی می شود که می توان برای نیازهای دستکاری DOM در مرورگرهای مختلف مدرن به آن اعتماد کرد.

برای مشاهده مرورگرهایی که از این روش پشتیبانی می کنند، خلاصه زیر را تحلیل کنید:

Edge : در تمام نسخه ها پشتیبانی می شود.

Chrome : در همه نسخه ها پشتیبانی می شود.

Opera : در تمامی نسخه ها پشتیبانی می شود.

سافاری : در تمام نسخه ها به جز نسخه 3.1-3.2 پشتیبانی می شود

فایرفاکس : در تمامی نسخه ها به جز نسخه 2-7 پشتیبانی می شود

بهترین روش ها برای استفاده از متد insertAdjacentHTML()

برای استفاده موثر از متد insertAdjacentHTML() ، در اینجا چند بهترین روش وجود دارد که باید دنبال کنید:

روش را درک کنید

درک نحوه کار این روش به شما کمک می کند تا موقعیت درج محتوای HTML خود را مشخص کنید. موقعیت های مختلف را درک کنید و بر اساس نیاز خود به درستی انتخاب کنید.

 // Inserting the HTML content after the target element document.getElementById('div').insertAdjacentHTML('afterend', '<div>New content before the target element</div>');

از آن کم استفاده کنید

استفاده بیش از حد از روش های درج عنصر پویا HTML برای نگهداری کد مضر است.

برای یک برنامه ساده، دستکاری مستقیم DOM کار را انجام می دهد.

 / Consider Using this: let newElement = document.createElement('div'); newElement.textContent = 'New element'; element.appendChild(newElement); // Instead of this: element.insertAdjacentHTML('beforeend', '<div>New element</div>');

نسبت به عملکرد هوشیار باشید

اگر به طور مکرر مقادیر زیادی از محتوای HTML را وارد می کنید، دستکاری DOM می تواند برای عملکرد گران تمام شود. سعی کنید به‌روزرسانی‌های DOM را به‌ویژه در سناریوهای عملکرد به حداقل برسانید:

 // Consider using batch insertion: let section = ''; data.forEach(item => { section += `<div>${item}</div>`; }); element.insertAdjacentHTML('beforeend', section); // Instead of inserting one by one in a loop: data.forEach(item => { element.insertAdjacentHTML('beforeend', `<div>${item}</div>`); });

رسیدگی به خطاها

وقتی از متد insertAdjacentHTML() استفاده می‌کنید، اگر محتوای HTML که می‌خواهید درج کنید نامعتبر باشد، ممکن است متد با خطا مواجه شود. از بلوک های try-catch برای مدیریت مناسب این موقعیت ها استفاده کنید.

 const div = document.getElementById('div'); try { // Check if the value of div is true if (div.insertAdjacentHTML) { div.insertAdjacentHTML('beforeend', '<div>New Element</div>'); } else { throw new Error('insertAdjacentHTML is not supported.'); } } catch (error) { // Handling the error console.error('Error:', error.message); // Alternate code div.innerHTML += '<div>Fallback: New Element</div>'; }

نتیجه

در این آموزش با نحوه نحو و گزینه های قرارگیری متد insertAdjacentHTML() آشنا شدید. ما همچنین سازگاری مرورگر و برخی از بهترین روش‌ها را در هنگام استفاده از متد insertAdjacentHTML() تحلیل کردیم.

خبرکاو