The HTML DOM innerHTML property returns and allow us to modify inner HTML of an element. The inner HTML is the content.
Syntax
Following is the syntax −
1. Returning innerHTML
object.innerHTML
2. Setting inner HTML
object.innerHTML=”value”
Here, “value” represents the content or nested HTML elements.
Example
Let us see an example of innerHTML property −
<!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>
Output
This will produce the following output −
Click on “Get Square” button to display square inside green square.
Now, click on “Get Circle” button to display circle inside green square.