Join my Laravel for REST API's course on Udemy 👀

Count the amount of child nodes of an HTML element with JavaScript

April 4, 2021  ‐ 1 min read

It is quite simple to count the amount of direct child nodes of an HTML element with regular JavaScript without jQuery or any other fancy stuff.

You can call the .childElementCount property on the element to get the amount of child nodes. Take the following snippets for example.

<ul id="example">
  <li>...</li>
  <li>...</li>
</ul>
document.getElementById("example").childElementCount;
// => 2

document.getElementById('example') returns a parent node, on which we call the childElementCount returning the amount of child nodes.