آموزش ویژگی innerHTML در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی innerHTML در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی innerHTML در DOM جاوااسکریپت
با استفاده از ویژگی innerHTML میتونیم هم محتوای داخل یک عنصر رو بدست آوریم و یا هم میتونیم محتوای HTML جدید در داخل عنصر قرار دهیم.
این ویژگی محتوای HTML رو برمیگردونه و یا میتونه محتوای HTML جدید در عنصر قرار دهد.
| مقدار برگشتی | یک رشته که شامل محتوای HTML یک عنصر می باشد |
|---|
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : گرفتن محتوای یک تگ و ریختن همون محتوا در تگ دیگر
|
1 2 3 4 5 6 7 8 9 10 |
<script> function get(){ var mytext , result; mytext = document.getElementById("MyText"); result = document.getElementById("Result"); result.innerHTML = mytext.innerHTML; } </script> |
مثال شماره ۲ : تنظیم / ست کردن مقدار جدید در تگ
|
1 2 3 4 5 6 7 8 9 |
<script> function set(){ var mytext; mytext = document.getElementById("MyText"); mytext.innerHTML = "محتوای جدید من"; } </script> |
مثال شماره ۳ : حذف کردن مقدار موجود در تگ
|
1 2 3 4 5 6 7 8 9 |
<script> function set(){ var mytext; mytext = document.getElementById("MyText"); mytext.innerHTML = ""; } </script> |
مثال شماره ۴ : قرار دادن تگ های HTML درون یک عنصر – میخوایم با کلیک بروی یک دکمه، تگ a ( یا لینک ) با آدرس سایت فری لرن درون تگ مورد نظر ما اضافه شه.
|
1 2 3 4 5 6 7 8 9 |
<script> function set(){ var mytext; mytext = document.getElementById("MyText"); mytext.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 |
<script> function inH(){ alert(document.getElementById("MyText").innerHTML) } function inT(){ alert(document.getElementById("MyText").innerText) } function TxC(){ alert(document.getElementById("MyText").textContent) } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| innerHTML | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
- گرفتن مقدار :
|
1 |
Element.innerHTML; |
- تنظیم / ست کردن مقدار جدید :
|
1 |
Element.innerHTML = " New_Value "; |
- حذف محتوای داخل عنصر :
|
1 |
Element.innerHTML = ""; |
Free-Learn
نکات و توضیحات
- ویژگی innerHTML میتونه محتوای یک عنصر رو که شامل دستورات HTML و خط فاصله بین کلمات می باشد برگردونه.
- ویژگی innerText میتونه فقط خوده محتوارو ( بدون محاسبه خط فاصله بین کلمات و دستورات HTML ) برگردونه.
- ویژگی textContent میتونه محتوای یک عنصر رو که فقط شامل خط فاصله می باشد برگردونه.
