How to check a HTML element exists and empty in jQuery

In this tutorial I will show you how to check a HTML element exists and empty using jQuery. Some times we need to check if the DIV is exists or not to add some conditional content. This tutorial will be helpful.

For example we have following DIV:

<div id="DIV_ID"></div>

If you want to check HTML element is exists or not, you can use the length property of the jQuery object.

if($("#DIV_ID").length > 0) {
    //div exists
}
else {
    //div does not exists
}

Now if you want to check the above div element is empty or not.

if ($("#DIV_ID").is(":empty")){
    // div is empty
}

And also you can use .html() function , like below

if(jQuery("#DIV_ID").html()=="") {
    // div is empty
}

Another way to check if div is empty or not

if( jQuery("#DIV_ID").html().length > 0){
   // div is empty
}

Hope this tutorial will help you to check HTML element is exists and empty using jQuery.