HTML DOM innerHTML Property

HTMLWeb DevelopmentFront End Technology

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 −

 Live Demo

<!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.

raja
Published on 16-Jul-2019 15:46:26
Advertisements