We will discuss how to check if a Div element is empty using JavaScript using a couple of methods, namely innerHTML and html(). Regardless of whether the type of element is div or whatever, we will show you how to check if it is empty. Let’s get started.
Check if a Div element is empty using JavaScript
Using innerHTML and replaceAll()
Syntax:
DOMElement.innerHTML
This is not a method of function in JavaScript; instead, innerHTML is an attribute that is of every DOM element in your HTML page. It helps you get the HTML code inside the element that is called, it includes all the text inside the div element. For instance:
// Get the div element
let myDiv = document.createElement("div");
// Check if a div element is empty
if (myDiv.innerHTML == "") {
console.log("Div element is empty");
} else {
console.log("Not an empty div element");
}Output:
Div element is emptyAnother example:
// Get the div element
let myDiv = document.createElement("div");
myDiv.innerHTML = "LearnShareIT";
// Check if a div element is empty
if (myDiv.innerHTML == "") {
console.log("Div element is empty");
} else {
console.log("Not an empty div element");
}Output:
Not an empty div element
The first example above shows that we have an empty div and we veryfy it by determine whether the innerHTML property of that element is a completely blank string or not. As it is the empty string, we receive true. Otherwise, it will return false if the innerHTML property is not empty, such as LearnShareIT, as in the second example. However, if the innerHTML contains only spaces, it will be recognized as not empty. If you consider it as empty also, then you should use the replaceAll() method (read its syntax here) as follow:
<html>
<body>
<div id="myDiv"></div>
<script>
// Get the div element
let myDiv = document.getElementById("myDiv");
// Check if a div element is empty
if (myDiv.innerHTML.replaceAll(" ", "") == "") {
alert("Div element is empty");
} else {
alert("Not an empty div element");
}
</script>
</body>
</html>Output:
Div element is empty
As can be seen, we have used the replaceAll() method to replace all the spaces of the innerHTML attribute with an empty character. So if the string after the replacement is a completely empty string, we can say that the element is empty also. If you don’t want to apply this method, but you want a simpler one, then you can utilize another method without passing arguments. We will show you how to use it in the examples of the next solution.
Using jQuery html() and trim()
If you are working with jQuery, you can easily check if a div element is empty using the html() method. Otherwise, you will need to import the library before using:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> Below is the syntax and usage of html() method in jQuery
Syntax:
$(selector).html()
Parameter:
- selector: The selector (css selector is also valid) you will use to get a div element you want.
<html>
<body>
<div id="myDiv"> </div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
// Get the div element
let myDiv = $("#myDiv");
// Check if a div element is empty
if (myDiv.html().trim() == ""){
alert("Div element is empty");
}
else {
alert("Not an empty div element");
}
</script>
</body>
</html>Output:
Div element is emptyAs you can see, the html() method works like the innerHTML attribute in the first solution. It returns the HTML code inside an element (not the HTML code representing that element). We also call a trim() method to remove leading and trailing spaces. If the string after trimming is a completely empty string, we can assume that our div element is empty.
Summary
We have discovered how to check if a Div element is empty using JavaScript in two different ways. We suggest you use the innerHTML attribute in the first solution to achieving this. Have a nice day!
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R
