Computer >> Computer tutorials >  >> Programming >> HTML

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 −

HTML DOM innerHTML Property

Click on “Get Square” button to display square inside green square.

HTML DOM innerHTML Property

Now, click on “Get Circle” button to display circle inside green square.

HTML DOM innerHTML Property