HTML DOM innerHTML प्रॉपर्टी किसी एलिमेंट के आंतरिक HTML को रिटर्न करने और संशोधित करने की अनुमति देती है। आंतरिक HTML सामग्री है।
सिंटैक्स
निम्नलिखित सिंटैक्स है −
1. innerHTML रिटर्न करना
object.innerHTML
2. आंतरिक HTML सेट करना
object.innerHTML=”value”
यहां, “value” सामग्री या नेस्टेड HTML एलिमेंट्स को दर्शाता है।
उदाहरण
आइए innerHTML प्रॉपर्टी का एक उदाहरण देखें −
<!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 प्रॉपर्टी उदाहरण</h1> <div class="outer-box"> </div> <button onclick="getsquare()">वर्ग प्राप्त करें</button> <button onclick="getcircle()">वृत्त प्राप्त करें</button> <script> function getsquare() { var outerBox = document.querySelector('.outer-box'); outerBox.innerHTML ='<div class="inner-box">वर्ग</div>'; } function getcircle() { var outerBox = document.querySelector('.outer-box'); outerBox.innerHTML ='<div class="inner-circle">वृत्त</div>'; } </script> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देगा −
हरे वर्ग के अंदर वर्ग प्रदर्शित करने के लिए “वर्ग प्राप्त करें” बटन पर क्लिक करें।
अब, हरे वर्ग के अंदर वृत्त प्रदर्शित करने के लिए “वृत्त प्राप्त करें” बटन पर क्लिक करें।
