HTML DOM innerHTML Property

The innerHTML property is used to write the dynamic html on the html document. It basically sets or returns the html content of an html element. The syntax of innerHTML is as follows :
To get the innerHTML property :
 HTMLElementObject.innerHTML
 To set the innerHTML property :
 HTMLElementObject.innerHTML = content
Where the content specifies the HTML content of an element.

Example :
<html>
<head>
  <script>
    function printFunc() {
      var text = document.getElementById('box').value;
      document.getElementById('demo').innerHTML = "<p>Hello " + text + "</p>";
    }
  </script>    
</head>
<body>
  <p>Enter your Name :</p>
  <input type="text" id="box"/>
  <input type="button" onclick="printFunc()" value="Click Here"/>
  <div id="demo"></div>
</body>
</html>
Output :


Enter your Name :



At the above example, when the user click the button then the text in the textbox wiil printed out. As we can see that the document is the root element that represents the whole html document. Which grabs the textbox text by using getElementById() method where the value property returns the input text and then set the value of the empty div by using innerHTML property.

Next Topic :