بررسی innerHTML در جاوااسکریپت

ویژگی innerHTML یکی از پرکاربردترین ویژگی های موجود در جاوااسکریپت می باشد که با استفاده از این ویژگی می‌تونیم محتوای موجود در یک عنصر رو دریافت، تغییر و ایجاد نماییم.

یعنی در یه کلام ، اگه خواستیم محتوایی رو داخل یک تگ قرار بدیم یا برعکس اگه خواستیم محتوای یک تگ رو بدست آوریم می‌تونیم به راحتی با استفاده از ویژگی innerHTML اینکارو انجام بدیم.


مثال شماره ۱ : ریختن محتوای جدید در تگ h2

<body>

<h2 id=&quotresult&quot></h2>



let b = document.getElementById(&quotresult&quot);
b. innerHTML  =&quotسلام خوبی؟&quot



</body>


مثال شماره ۲ : دریافت محتوای تگ h2 و سپس ریختن همون محتوا در درون یک تگ h2 دیگر

<body>

<h2 id=&quottest&quot>حسین شاه محمدی</h2>
<h2 id=&quotresult&quot></h2>



let a = document.getElementById(&quottest&quot);
let b = document.getElementById(&quotresult&quot);
b. innerHTML  = a. innerHTML ;



</body>


مثال شماره ۳ : حذف یا خالی کردن محتوای موجود در یک عنصر

<body>

<button dir=&quotrtl&quot =&quotdel();&quot>پاک یا حذف کردن تگ h2</button>
<h2 id=&quottest&quot>حسین شاه محمدی</h2>
<p>Salam In Yek Matn Baraye Test Mibashad. Salam In Yek Matn Baraye Test Mibashad.</p>



function del(){
 let a = document.getElementById(&quottest&quot);
 a. innerHTML  = &quot&quot
}



</body>


مثال شماره ۴ :دریافت عنوان صفحه ( یا تگ Title ) ( که در تب مرورگر می باشد ) و نمایش در یک تگ

<head>
<title id=&quotMy_Title&quot>صفحه حسین شاه محمدی در سایت ویرگول</title>
<style>

body{
 text-align:center;
 font-family:tahoma;
 font-size:14px;
 direction:rtl;
}
 
span#result{
 background-color:#f2f2f2;
 padding:5px;
 border-radius:100px;
}

</style>
</head>
<body>

<p>عنوان صفحه برابر است با : <span id=&quotresult&quot></span></p>



let a = document.getElementById(&quotresult&quot);
let b = document.getElementById(&quotMy_Title&quot);;
a. innerHTML = b. innerHTML ;



</body>



منبع: developer.mozilla.org