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

در این مقاله قصد داریم بیاموزیم که دستور 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>