The innerHTML property is used in JavaScript sets or returns the HTML content (inner HTML) of an element. It can be used to write the dynamic HTML on the html document.
Return the innerHTML property:
HTMLElementObject.innerHTMLSet the innerHTML property:
HTMLElementObject.innerHTML = valueTo insert the HTML into the document rather than replace the contents of an element, use the method insertAdjacentHTML().
Example innerHTML JavaScript
Simple example code Get the HTML content of a <p> element with id=”myName”:
<!DOCTYPE html>
<html>
<body>
<p id="myName">EyeHunts Tutorial</p>
<button onclick="myFunction()">Get MSG</button>
<script>
function myFunction() {
var x = document.getElementById("myName").innerHTML;
alert(x)
}
</script>
</body>
</html>
Output:
Set the HTML content of a <p> element with id=”demo”:
<body>
<p id="demo">EyeHunts Tutorial</p>
<button onclick="myFunction()">Change</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello";
}
</script>
</body>Do comment if you have any doubts or suggestions on this JS HTML topic.
Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version