- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM innerHTML Property
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.
Advertisements