Skip to main content

How to Check if a div Element is Empty in JavaScript

In DOM manipulation, you often need to determine if an element, such as a div, is "empty." However, "empty" can mean different things: Does it contain absolutely no child nodes, including whitespace or comments? Or does it just contain no visible content, like text or other HTML elements?

This guide will teach you the two primary methods for checking if a div is empty. You will learn how to use the .innerHTML property for a simple content check, and the more precise .childNodes.length property for a strict check.

The Challenge: Defining "Empty"​

Before checking if a div is empty, you must decide what "empty" means in your use case.

  • Visibly Empty: The div contains no text and no other HTML elements. It might, however, contain whitespace (spaces, newlines) or HTML comments. For most UI purposes, this is considered empty.
  • Strictly Empty: The div has absolutely nothing inside it. No text, no elements, no whitespace, no comments.

The method you choose depends on which definition you need.

Consider this HTML code for the next two solutions:

<div id="box1">   </div>
<div id="box2"><!-- A comment --></div>
<div id="box3">Some text</div>
<div id="box4"></div>

Solution 1 (Recommended): Checking for No Visible Content with .innerHTML​

This is the most common and practical method. It checks if the div contains any HTML elements or text. It correctly ignores whitespace and comments, which is usually the desired behavior.

The logic:

  • Get the innerHTML of the element, trim any surrounding whitespace, and check if the result is an empty string.

The solution:

function isVisiblyEmpty(element) {
  // .innerHTML gets the HTML content. .trim() removes whitespace.
  return element.innerHTML.trim() === '';
}

const box1 = document.getElementById('box1'); // Contains only whitespace
const box2 = document.getElementById('box2'); // Contains a comment
const box3 = document.getElementById('box3'); // Contains text
const box4 = document.getElementById('box4'); // Truly empty

console.log(`Is box1 visibly empty? ${isVisiblyEmpty(box1)}`); // Output: true
console.log(`Is box2 visibly empty? ${isVisiblyEmpty(box2)}`); // Output: true
console.log(`Is box3 visibly empty? ${isVisiblyEmpty(box3)}`); // Output: false
console.log(`Is box4 visibly empty? ${isVisiblyEmpty(box4)}`); // Output: true
note

This is the recommended approach for most situations because it aligns with what a user would consider "empty." A similar approach uses the .textContent property, which also works well.

Solution 2: Checking for Absolutely No Nodes with .childNodes​

If you need to be absolutely sure that there is nothing inside a div—not even a space, a newline character, or a comment—you must check its childNodes.

The logic:

  • The element.childNodes property returns a NodeList collection of all child nodes. If the .length of this collection is 0, the element is strictly empty.

The solution:

function isStrictlyEmpty(element) {
  return element.childNodes.length === 0;
}

const box1 = document.getElementById('box1'); // Contains a text node (whitespace)
const box2 = document.getElementById('box2'); // Contains a comment node
const box3 = document.getElementById('box3'); // Contains a text node
const box4 = document.getElementById('box4'); // Truly empty

console.log(`Is box1 strictly empty? ${isStrictlyEmpty(box1)}`); // Output: false
console.log(`Is box2 strictly empty? ${isStrictlyEmpty(box2)}`); // Output: false
console.log(`Is box3 strictly empty? ${isStrictlyEmpty(box3)}`); // Output: false
console.log(`Is box4 strictly empty? ${isStrictlyEmpty(box4)}`); // Output: true
note

This method is more precise but less practical for UI logic, as it will consider a div with only a newline character inside it to be "not empty."

How the Methods Work and Their Key Differences​

  • .innerHTML.trim(): The .innerHTML property returns a string of all the HTML inside an element. Crucially, HTML comments and pure whitespace nodes are not considered part of the innerHTML in a way that survives a trim(). This method effectively asks, "Is there any rendered content here?"
  • .childNodes.length: This property returns a collection of all nodes, which includes:
    • Element Nodes (<div>, <p>, etc.)
    • Text Nodes (any text, including whitespace and newlines between tags)
    • Comment Nodes (<!-- ... -->)

This method asks, "Is there absolutely anything at all inside this element?"

Conclusion​

Checking if a div is empty is a simple task once you define what "empty" means for your script.

The key takeaways are:

  1. For most practical purposes, where you want to know if a div has any visible content, the .innerHTML.trim() === '' method is the recommended best practice.
  2. If you need to be absolutely certain that an element has no child nodes of any kind (including whitespace or comments), use the .childNodes.length === 0 method.

By choosing the right method for your specific needs, you can write clear and accurate logic for managing your DOM.

Table of Contents