JavaScript Node hasChildNodes() Method

What You’ll Learn

The Node.hasChildNodes() method returns whether a node has any child nodes. Learn how whitespace text nodes affect the result, and how this compares to childNodes and Element.children.

Introduction

Before you walk childNodes or clear a container, ask: does this node have any children at all? hasChildNodes() answers with a simple boolean.

The common beginner surprise is whitespace. HTML like <div>\n <span></span>\n</div> creates text nodes for the newlines and spaces—so the div has child nodes even around a single element.

Understanding hasChildNodes()

MDN: returns a boolean indicating whether the given Node has child nodes or not.

• true — at least one entry in childNodes.
• false — no children (empty node).
• Includes — Element, Text, Comment, and other node types.
• Does not mean — “has visible HTML elements only.”

📝 Syntax

const hasKids = node.hasChildNodes();

Parameters

None.

Return value

A boolean: true if the node has child nodes, otherwise false.

⚖️ hasChildNodes() vs children vs childNodes

Examples Gallery

Examples follow MDN Node.hasChildNodes() patterns. Use View Output or Try It Yourself for each case.

const foo = document.getElementById("foo");

if (foo.hasChildNodes()) {
  console.log(foo.childNodes.length);
} else {
  console.log("no children");
}

1

const empty = document.createElement("div");
console.log(empty.hasChildNodes()); // false

empty.appendChild(document.createElement("span"));
console.log(empty.hasChildNodes()); // true

false
true

const box = document.getElementById("box");
// HTML may look like:
// <div id="box">
//   <span>Hi</span>
// </div>

console.log(box.hasChildNodes());     // true
console.log(box.childNodes.length);   // often > 1 (text + span + text)
console.log(box.children.length);     // 1 (elements only)

true
3
1

const note = document.getElementById("note");
// <div id="note">Only text here</div>

console.log(note.hasChildNodes());  // true (text node)
console.log(note.children.length);  // 0
console.log(note.childElementCount); // 0

true
0
0

const list = document.getElementById("list");
console.log(list.hasChildNodes()); // true

list.textContent = "";
console.log(list.hasChildNodes()); // false

true
false

🚀 Common Use Cases

• Guard before iterating childNodes.
• Decide whether a container needs cleanup before insert.
• Detect empty vs non-empty nodes when building or serializing trees.
• Pair with children when you must ignore whitespace/text.
• Simple emptiness checks in recursive DOM walkers.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Whitespace and text nodes count toward “has children.”
• Related: insertBefore(), childNodes, firstChild, getRootNode(), JavaScript hub.

💡 Best Practices