سبد (0)

تبلیغات

متفرقه JS-دستور ‏‪ innerHTML

بیان مطلب به صورت : کاملا تشریحی 

در این مقاله قصد داریم بیاموزیم که دستور innerHTML چیست و چه کاری را انجام می دهد . کلمه ی inner  به معنی 'درونی'  است ،‌پس کلمه ی innerHTML  به معنی اچ تی ام ال های درونی ،‌هست . 

دستور زیر را در نظر بگیرید :

کد 1.1

<p> </p>

 این دستور یک پاراگراف را ایجاد می کند ،‌‌هر آنچه بین تگ های <p> و <p/> قرار می گیرد را innerHTML می گوییم .به عبارت دیگر هر متنی که بین این دو تگ قرار دارد را innerHTML یا اچ تی ام ال درونی می گوییم . به مثال زیر توجه کنید : 

کد 1.2

<P> اچ تی ام ال درونی </P>

حالا فرض کنید که ما یک پاراگراف مثل بالا داریم و می خواهیم با استفاده از جاوا اسکریپت ، متن درون این پاراگراف را کپی کرده و در درون یک متغیر به نام text قرار دهیم  . مثال : 

کد 1.3

<html>

<body>

<p>اچ تی ام ال درونی</p>

</body>

</html>

برای اینکه بتوانیم با تگ <p>  ارتباط برقرار کنیم برای آن یک ID می سازیم و نام آن را P1 قرار می دهیم : 

کد 1.4

<html>

<body>

<p id="p1">اچ تی ام ال درونی</p>

</body>

</html>

اکنون برای اینکه بتوانیم کدهای جاوا اسکریپت را وارد کنیم تگ های <script>  و <script/> را به بدنه وارد می کنیم : 

1.5

<html>

<body>

<p id="p1">اچ تی ام ال درونی</p>

<script>

</script>

</body>

</html>

حالا می خواهیم با استفاده از دستور getElementbyId() با پاراگراف مورد نظر ارتباط برقرار کنیم ، پس ID پاراگراف را که p1 بود در درون پرانتز های دستور getElementbyId() قرار می دهیم  و چون دستور getElementbyId() یک زیرمجموعه ی (شئِ)     document است .ابتدا document  را می نویسیم و سپس یک نقطه گذاشته و سپس دستور  getElementById("p1")  را می نویسیم . نقطه ، به این معنی است که دستور سمت راست یک زیرمجموعه(شئ) از دستور سمت چپ است . همواره برای وارد کردن یک دستور ابتدا باید مجموعه ای که این دستور در درون آن قرار دارد را وارد کنید .

کد 1.6

document.getElementById("p1");

 تا اینجا با عنصر مورد نظر ارتباط برقرار کرده ایم حالا باید از این ارتباط برای دسترسی به متن درون پاراگرف مورد نظر استفاده کنیم ،‌برای این کار باید از دستور innerHTML استفاده کنیم ، پس یک نقطه می گذاریم  و سپس  این دستور را  در ادامه ی خط بالا اضاف می کنیم . 

کد 1.7

document.getElementById("p1").innerHTML;

کلمه ی document به معنی سند ،‌است . دستور بالا به رایانه می گوید: در سند HTML با عنصری  که ID آن P1 است ارتباط برقرار کن و سپس متن درون آن عنصر(دراینجا پاراگرف) را در نظر بگیر .

کاربرد اول :

 می خواهیم متن درون پاراگراف را تغییر دهیم پس می نویسیم : 

کد 1.8

document.getElementById("p1").innerHTML = "متن درون پاراگراف تغییر کرده است";

پس کد ما به شکل زیر در می آید : 

کد 1.9

<html>

<body>

<p id="p1">اچ تی ام ال درونی</p>

<script>

   document.getElementById("p1").innerHTML = "متن درون پاراگراف تغییر کرده است";

</script>

</body>

</html>
خودتان امتحان کنید »

 

کاربرد دوم :

یک متغیر به نام text  می سازیم و آن را برابر با دستور بالا قرار می دهیم ، با این کار این متغیر text  برابر با متن درونی پاراگرف می شود  و بعدا می توانیم از آن در کارهای مختلف استفاده کنیم : 

کد 1.8

var text = document.getElementById("p1").innerHTML;

پس کد های ما به شکل زیر در خواهد آمد : 

کد 1.9

<html>

<body>

<p id="p1">اچ تی ام ال درونی</p>

<script>

   var text = document.getElementById("p1").innerHTML;

</script>

</body>

</html>

دیدگاه‌ها  

0 # Guest 1397-06-03 00:13
اگر بخواهیم محتوای یک textarea از یک صفحه html را به محتوای یک div در صفحه ای دیگر از html انتقال بدهیم چه باید کرد ؟!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # Mahdi vilson 1380 1395-04-06 00:34
اقا واقعا دمتون گرم سایتتون بی نظیره تو هیچ سایتی اینجوری نکته به نکته و با مثال توضیح نداده بودن ممنونیم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # م111 1394-09-07 14:07
سلام
خیلی متشکرم از این منابعی که می ذارین خدا پشت و پناهتون باشه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+8 # امیرکیان 1393-12-22 12:23
این مثال ها خیلی کاربردی هستند ولی چرا انقدر کم هستند لطفاً بیشترش کنید خیلی استقبال میشه
در ضمن دست شما درد نکنه که این سایت را راهاندزی کردید اجرتون با امام حسین :)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # mahdizz 1393-11-28 23:35
اگه بخواهیم متن داخل پاراگراف رو بگیریم و به یه پاراگراف دیگه بدیم باید چیکار کنیم.

مثلا
یه پاراگراف داریم با آیدی 1 و متن : پاراگراف اول .
یه پاراگراف هم داریم با آیدی 2 و متن : پاراگراف دوم .

حالا میخواهیم با کلیک روی یه دکمه یا لینک متن پاراگراف اول تو پاراگراف دوم نوشته بشه یعنی

آیدی 1 ، متن : پاراگراف اول .
آیدی 2 ، متن : پاراگراف اول .
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+10 # مظاهر نصوحی 1393-11-29 00:11
ابتدا باید یک تابع داشته باشیم که به رویداد کلیک پاسخ بدهد.
کدی که در این تابع نوشته می شود innerhtml پاراگراف دوم را تغییر می دهد.

function changeText(){
document.getElementById(id2).innerHTML=document.getElementById(id1).innerHTML
}


حالا کافیه این تابع را در onClick دکمه صدا بزنیم:


<p id="id1">
متن پاراگراف اول
</p>
<p id="id2">
متن پاراگراف دوم
</p>
<button type="button" onclick="change Text()"> change p2 text </button>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی JavaScript

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی