<!DOCTYPE HTML>
<html>
<head>
<title>
How to get the child element of
a parent using JavaScript ?
</title>
<style>
.parent {
background: green;
color: white;
}
.child1 {
background: blue;
color: white;
margin: 10px;
}
.child2 {
background: red;
color: white;
margin: 10px;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Click on the button select
the child node
</h3>
<div class="parent" id="parent"> Parent
<div class="child child1"> Child1 </div>
<div class="child child2"> Child2 </div>
</div>
<br>
<button onclick="GFG_Fun()">
click here
</button>
<h1 id="result" style="color: green;"></h1>
<script>
let res = document.getElementById('result');
function GFG_Fun() {
let parent = document.getElementById('parent');
let children = parent.querySelectorAll('.child');
res.innerHTML = "Text of child node is - '" +
children[0].innerHTML + "' and '" +
children[1].innerHTML + "'";
}
</script>
</body>
</html>