تفاوت بین innerText و innerHTML

وقتی می‌خواهیم توسط دستورات جاوااسکریپت به محتوای یک div یا span دسترسی پیدا کنیم و آن را بخوانیم یا بنویسیم، باید از ویژگی‌های innerText یا innerHTML استفاده کنیم که هر کدام کاربرد خاص خودش را دارد.

اگر متن داخل div و span، یک متن خام باشد، بین دو ویژگی innerText و innerHTML تفاوتی نیست، اما اگر متن داخل div و span، استایل خاصی داشته باشد یا شامل عناصر دیگری باشد، آنگاه حتما باید از innerHTML استفاده کنیم.

مثال: قطعه کد روبرو را در نظر بگیرید

<div id="div1">
    <p style="font-family: Tahoma; font-weight: bold;">
        <a href="http://www.daszarrin.ir">من یک مسافرم</a>
    </p>
</div>

با استفاده از innerText یا textContent خواهیم داشت:

var myvalue = document.getElementById('span1').innerText;
==========
result:
من یک مسافرم

با استفاده از innerHTML خواهیم داشت:

var myvalue = document.getElementById('span1').innerHTML;
==========
result:
    <p style="font-family: Tahoma; font-weight: bold;">
        <a href="http://www.daszarrin.ir">من یک مسافرم</a>
    </p>

مشکل خواندن محتوای div و span در firefox فایرفاکس

خواندن و ویرایش و ذخیره مقدار و محتوای تگ span و div توسط جاوا اسکریپت

این مقاله همچنین درباره "تفاوت innerText و textContent" ابهام‌زدایی می‌کند.

همچنین می‌توان عنوان این مقاله را "مشکل خواندن محتوای div و span در firefox فایرفاکس" گذاشت.

برای خواندن یا نوشتن در داخل یک span یا div از طریق دستورات javascript باید از فیلد innerText یا innerHTML استفاده کنیم.

نکته حائز اهمیت این است که فایرفاکس از innerText پشتیبانی نمی‌کند و به جای آن باید از textContent استفاده کرد.

مثال برای IE

var myvalue = document.getElementById('span1').innerText;

مثال برای None IE

var myvalue = document.getElementById('span1').textContent;

به کوچکی و بزرگی حروف دقت نمایید. جاوااسکریپت یک زبان حساس به کوچکی و بزرگی حروف است.

javascript is a case sensitive language.

تفاوت بین innerText و innerHTML