آموزش ویژگی innerHTML در DOM جاوااسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی innerHTML در DOM جاوااسکریپت با من همراه باشید.

ویژگی innerHTML در DOM جاوااسکریپت

Free-Learn

ویژگی innerHTML در DOM جاوااسکریپت

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

این ویژگی محتوای HTML رو برمیگردونه و یا میتونه محتوای HTML جدید در عنصر قرار دهد.

مقدار برگشتی یک رشته که شامل محتوای HTML یک عنصر می باشد

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.

مثال شماره ۱ : گرفتن محتوای یک تگ و ریختن همون محتوا در تگ دیگر

امتحان کنید

مثال شماره ۲ : تنظیم / ست کردن مقدار جدید در تگ

امتحان کنید

مثال شماره ۳ : حذف کردن مقدار موجود در تگ

امتحان کنید

مثال شماره ۴ : قرار دادن تگ های HTML درون یک عنصر – میخوایم با کلیک بروی یک دکمه، تگ a ( یا لینک ) با آدرس سایت فری لرن درون تگ مورد نظر ما اضافه شه.

امتحان کنید

مثال شماره ۵ : نشان دادن تفاوت ۳ویژگی innerText و innerHTML و textContent

امتحان کنید

توضیح مثال بالا :

در مثال بالا خواستیم تفاوت ۳ ویژگی innerText و innerHTML و textContent رو با همدیگه ببینیم.

  • innerHTML : میتونه محتوای یک عنصر رو که شامل دستورات HTML و خط فاصله بین کلمات می باشد برگردونه.
  • innerText : میتونه فقط خوده محتوارو ( بدون محاسبه خط فاصله ها و دستورات HTML ) برگردونه.
  • textContent : میتونه محتوای یک عنصر رو که فقط شامل خط فاصله می باشد برگردونه.

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
innerHTML بله بله بله بله بله

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.

  • گرفتن مقدار :

  • تنظیم / ست کردن مقدار جدید :

  • حذف محتوای داخل عنصر :

 

Free-Learn

نکات و توضیحات

  • ویژگی innerHTML میتونه محتوای یک عنصر رو که شامل دستورات HTML و خط فاصله بین کلمات می باشد برگردونه.
  • ویژگی innerText میتونه فقط خوده محتوارو ( بدون محاسبه خط فاصله بین کلمات و دستورات HTML ) برگردونه.
  • ویژگی textContent میتونه محتوای یک عنصر رو که فقط شامل خط فاصله می باشد برگردونه.

Free-Learn

دریافت PDF یا پرینت این مطلب