HTML DOM innerHTML Property

HTML Web Development Front 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>