این آموزش در تاریخ ۱۴۰۱/۰۵/۱۹ آپدیت شده است.
آموزش ویژگی innerHTML در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی innerHTML در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی innerHTML در DOM جاوااسکریپت
با استفاده از ویژگی innerHTML میتونیم هم محتوای HTML داخل یک تگ رو بدست آوریم و یا هم میتونیم محتوای HTML جدید در داخل تگ قرار دهیم.
| مقدار برگشتی | برگشت محتوای HTML یک تگ |
|---|
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : ریختن محتوای جدید در تگ H2
|
1 2 3 4 5 |
<script> document.getElementById("Result").innerHTML = "فری لرن"; </script> |
مثال شماره ۲ : دریافت محتوای تگ h2 و سپس ریختن همون محتوا در درون یک تگ h2 دیگر
|
1 2 3 4 5 6 7 |
<script> var MyTag = document.getElementById("MyTag"); var Result = document.getElementById("Result"); Result.innerHTML = MyTag.innerHTML; </script> |
مثال شماره ۳ : گرفتن مقدار داخل تگ Input و سپس نمایشش در تگ H2
|
1 2 3 4 5 6 7 8 9 |
<script> function Show(){ var MyTag = document.getElementById("MyTag"); var Result = document.getElementById("Result"); Result.innerHTML = MyTag.value; } </script> |
مثال شماره ۴ : استفاده مستقیم از تگ های HTML ، مثلا با کلیک بروی یک دکمه، تگ a ( یا لینک ) با آدرس سایت فری لرن ، ایجاد شد
|
1 2 3 4 5 6 7 8 9 |
<script> function Set(){ var MyLink; MyLink = document.getElementById("MyLink"); MyLink.innerHTML = "<a href='https://free-learn.ir/'>سایت فری لرن</a>"; } </script> |
مثال شماره ۵ : نشان دادن تفاوت ۳ویژگی innerText و innerHTML و textContent
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> function IH(){ var MyText = document.getElementById("MyText").innerHTML; alert(MyText) } function IT(){ var MyText = document.getElementById("MyText").innerText; alert(MyText) } function TC(){ var MyText = document.getElementById("MyText").textContent; alert(MyText) } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| innerHTML | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
- گرفتن محتوای داخل تگ :
|
1 |
Element.innerHTML; |
- ست کردن مقدار جدید برای محتوای داخل تگ :
|
1 |
Element.innerHTML = " New_Value "; |
- حذف محتوای داخل تگ :
|
1 |
Element.innerHTML = ""; |
Free-Learn
نکات و توضیحات
- innerHTML : میتونه محتوای یک تگ رو که شامل دستورات HTML و خط فاصله بین کلمات می باشد برگردونه.
- innerText : میتونه فقط خوده محتوارو ( بدون محاسبه خط فاصله ها و دستورات HTML ) برگردونه.
- textContent : میتونه محتوای یک تگ رو که فقط شامل خط فاصله می باشد برگردونه.
