HTML DOM innerHTML প্রপার্টি একটি এলিমেন্টের অভ্যন্তরীণ HTML রিটার্ন করে এবং পরিবর্তন করতে দেয়। ইনার HTML হলো এলিমেন্টের কন্টেন্ট।
সিনট্যাক্স
ইনার HTML পাওয়ার জন্য:
object.innerHTML
ইনার HTML সেট করার জন্য:
object.innerHTML = "value"
এখানে value কন্টেন্ট বা নেস্টেড HTML এলিমেন্টকে নির্দেশ করে।
উদাহরণ
<!DOCTYPE html> <html> <head> <style> body{ text-align:center; } .outer-box{ background-color:#347924; width:200px; height:200px; padding:10px; text-align:center; font-weight:bold; color:white; margin:1rem auto; } .inner-box{ width:100px; height:100px; margin:3rem auto; background-color:#8dce79; } .inner-circle{ width:100px; height:100px; border-radius:50%; background-color:#8dce79; margin:3rem auto; } </style> </head> <body> <h1>innerHTML property Example</h1> <div class="outer-box"> </div> <button onclick="getsquare()">Get Square</button> <button onclick="getcircle()">Get Circle</button> <script> function getsquare() { var outerBox = document.querySelector('.outer-box'); outerBox.innerHTML = '<div class="inner-box">square</div>'; } function getcircle() { var outerBox = document.querySelector('.outer-box'); outerBox.innerHTML = '<div class="inner-circle">circle</div>'; } </script> </body> </html>
আউটপুট
নিচের আউটপুটটি দেখাবে:
"Get Square" বাটনে ক্লিক করলে সবুজ বক্সের ভেতরে স্কয়ার দেখাবে।
এখন "Get Circle" বাটনে ক্লিক করলে সবুজ বক্সের ভেতরে সার্কেল দেখাবে।
