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>