Get child element using JavaScript children property

Post Views: 21

In this post, I am going to tell you how to get a child element from its parent using JavaScript.

HTML DOM has children property that can return the collection of child elements.

For example, take the HTML snippets below:

<div id="myId">
This is parent element.
<div id="childrenId"></div>
<div class="childrenClass"></div>
</div>

The above HTML have an element with ID “myId” and it contains two child elements. Using the children property, we can easily get the collection of the child elements of the parent element which has the id “myId”.

Below is the JavaScript code snippet that will return the collection of child elements:

document.getElementById('myId').children;

From the above syntax, we can understand that the syntax to get the collection of child elements is:

element.children;

We can get each and every single child element by its index number.

For example, if we want to get only the first child element, then below is the code:

element.children[0];

Similarly, if we want the second one, then the code to get the element is:

element.children[1];

Always remember, that the index number to get the particular child element from child element collection return by JavaScript children property starts from 0.

From the HTML code snippets that I already mentioned, if we want to get the child element of “myId” with the id “childrenId”, then below is the JavaScript code that will do that:

document.getElementById('myId').children[0]

Now if we want to put some HTML content in our child elements of the parent with id “myId”, then below is the code:

var parent_element = document.getElementById('myId');
parent_element.children[0].innerHTML ='This is first child element';
parent_element.children[1].innerHTML ='This is second child element';

Complete JavaScript code to put HTML inside child elements

Now below is the complete example code for better understanding that will get child elements and then put content inside it:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

<div id="myId">
    This is parent element.
  <div id="childrenId"></div>
  <div class="childrenClass"></div>
</div>

<script type="text/javascript">
    var parent_element = document.getElementById('myId');
  parent_element.children[0].innerHTML ='This is first child element';
  parent_element.children[1].innerHTML ='This is second child element';
</script>

</body>
</html>

If we save it as HTML and then run on the browser, then we will see our content that we put using children property. You can see the result on your browser that is given below:

This is parent element.
This is first child element
This is second child element

You can notice that we haven’t used any one of the ID or class name or even the tag name in our JavaScript code by which we generally use to get the element. But still we able to get the child element using HTML DOM children property without using any class name or Id.

Also, read:

We can see our given HTML content in our child element which is the proof that we are able to get child element by its index number.

Get child element using JavaScript children property

Complete JavaScript code to put HTML inside child elements

Leave a Reply Cancel reply