Tutorials using JS
Get children of div
given a div element in HTML document, get the children of the div using JavaScript
Solution
to get the children of div element, we can use Element.children
property
myDiv.children
where myDiv
is the given div element
children
property returns the children of the calling element as an HTMLCollection
. HTMLCollection
is an array like collection of HTML elements
Program
in the following HTML code, we have a div element with id "myDiv"
and it has three children. we use children
property on the div element and get the children
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Tutorial</h1>
<h2>Get children of div</h2>
<button id="myBtn">Click me</button><br>
<div id="myDiv">
<p>This is a paragraph.</p>
<div>This is an inner div.</div>
<div>This is another inner div.</div>
</div>
<pre id="output"></pre>
<script>
document.getElementById("myBtn").addEventListener("click", function() {
const myDiv = document.getElementById("myDiv");
//get children of the div element
const myDivChildren = myDiv.children;
//iterate over each of the items using loop
for ( let i = 0; i < myDivChildren.length; i++ ) {
document.getElementById("output").innerHTML += i + " - " + myDivChildren[i].textContent + "\n";
}
});
</script>
</body>
</html>