I have a div that has a "span" and I am dynamically adding "div" tags with a class to identify them, so my question is: how can I know if my parent "div" tag has new div tag children without counting the tag "span"? because my problem is that the e[i].children.length function is always considering the span title as a child
In summary I need to know how many child div tags the parent div has (excluding all other html tags that can be added)
let e = document.getElementsByClassName('classDiv')
for (let i = 0; i < e.length; i++) {
if (e[i].children.length > 0) {
console.log("has children");
} else {
console.log("has no children");
}
}<div id="parent" class="classDiv">
<span id="title">title</span>
<div>children1</div>
<div>children2</div>
<div>children3</div>
</div>Try
var e = document.querySelectorAll('#parent > div');
console.log(e.length ? "has children" : "has no children");
The > selector is used to select elements with a specific parent
document.getElementById("parent").getElementsByTagName("div")
Will return all the child elements that are divs.
You can also do the same with getElementsByClassName instead of getElementById, while iterating over the results, and using the same getElementsByTageName on each one.