این آموزش در تاریخ ۱۴۰۱/۰۴/۱۹ آپدیت شده است.
کار با innerHTML در جاوا اسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با innerHTML در جاوا اسکریپت با من همراه باشید.
Free-Learn
کار با innerHTML در جاوا اسکریپت
ویژگی innerHTML
تقریبا یکی از پراستفاده ترین ویژگی های موجود در زبان جاوا اسکریپت می باشد که با استفاده از این ویژگی میتونیم محتوای موجود در یک عنصر رو دریافت، تغییر و یا از نو ایجاد نماییم.
یعنی در یه کلام ، اگه خواستیم محتوایی رو داخل یک تگ قرار بدیم یا برعکس اگه خواستیم محتوای یک تگ رو بدست آوریم میتونیم به راحتی با استفاده از ویژگی innerHTML اینکارو انجام بدیم.
مثال شماره ۱ : ریختن محتوای جدید در تگ 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> |
مثال شماره ۳ : حذف یا خالی کردن محتوای موجود در یک عنصر ( برای خالی کردن یا حذف کردن متن داخل یک تگ کافیه فقط ۲تا دابل کوتیشن بزاریم فقط همین )
1 2 3 4 5 6 7 8 |
<script> function Del(){ var MyTag = document.getElementById("MyTag"); 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> |