در جاوا اسکریپت برای دسترسی و تغییر محتوای عناصر HTML (منظور از عناصر تگ ها می باشد) از دو دستور innerHTML و innerText استفاده می کنیم.
تفاوت innerHTML و innerText
اما بریم ببینیم تفاوت innerHTML و innerText در جاوا اسکریپت چی هست و چه زمانی باید از هر کدام استفاده کنیم؟
در یک تعریف ساده، دستور innerHTML قابلیت پردازش تگ های html را دارد اما innetText نمی تواند تگ های html را پردازش کند.
به عنوان دیگه زمانی که بخواهیم تنها به رشته مورد نظر دسترسی پیدا کنیم و نیازی به پردازش تگ های html نباشد innerText را انتخاب می کنیم. مثال زیر رو ببینیم:
فرض کنید می خواهیم مقدار تگ p را که در کلاس دیگری به نام content قرار گرفته تغییر دهیم:
<div class="content">
<p>This is para content</p>
</div>
const con = document.querySelector('.content');
con.innerText = 'Change';
در مثال بالا عبارت درون تگ پاراگراف رو با استفاده از دستور innerText به “change” تغییر دادیم.
حالا می خوایم عبارت “change” رو در تگ “h2” قرار بدیم، اگر اینکار رو با دستور innerText انجام بدیم، تگ های html پردازش نمی شوند و تنها رشته ها و خود تگ ها در خروجی نمایش داده می شوند:
<h2>Change</h2>
استفاده از دستور innerHTML:
<div class="content">
<p>This is para content</p>
</div>
const con = document.querySelector('.content');
con.innerHTML = `<h2>Change</h2>`;
بدین شکل خروجی به همراه پردازش تگ های html به ما نمایش داده می شود:
Change
