Check If the Content of the Element is Empty with JavaScript

In this article, you will learn how to check if the content of the element is empty with JavaScript.

Introduction

The following is the HTML used in this article.

<div id="box">
  <h1>Lorem Ipsum</h1>
  <div id="el"></div>
</div>

Check if the element is empty with childNodes

The childNodes is a property that returns the child nodes of the specified element in NodeList.
Get the number of child nodes and check if the contents are empty.

JavaScript

let el = document.getElementById('el');

if(el.childNodes.length === 0){
  console.log("The element is empty");
}

Since it is judged by the length of Node, it will not be empty judgment if it has a text node.

Check if the element is empty with children

The children is a property that returns the elements of the specified node.
Get the number of elements that a node has and check if the contents are empty.

JavaScript

let el = document.getElementById('el');
if(el.children.length === 0){
  console.log("The element is empty");
}

Since it is judged by the length of Node, it will not be empty judgment if it has a text node.