JavaScript Code

How to get innerHTML of a div using JavaScript?

Tutorials using JS

Get inner HTML of a div

Given a div element in HTML document, get inner HTML of that div element using JavaScript.

Solution

To get inner HTML of a div element in the document using JavaScript, we can use Element.innerHTML property. Get the div element, and read the innerHTML property of the div element.

const myDiv = document.getElementById("myDiv");
var divInnerHTML = myDiv.innerHTML;

Program

In the following HTML code, we have a button element and a div element. When user clicks on the button, we get the inner HTML of the div element using innerHTML property and print it to console.

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Tutorial</h1>
<button id="myBtn">Click me</button>
<div id="myDiv">
    <p>Hello World!</p>
</div>

<script>
//set onclick listener for #myBtn
document.getElementById("myBtn").addEventListener("click", function() {
    //get div element
    const myDiv = document.getElementById("myDiv");
    //get inner HTML of the div
    var divInnerHTML = myDiv.innerHTML;
    console.log(divInnerHTML);
});
</script>

</body>
</html>

Copyright @2022