تفاوت بین 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 فایرفاکس