How to check if an element exists in jQuery?

When we use dynamic elements in jQuery then sometimes you should check whether elements exits or not before performing a certain action on that element. In such cases, you can use jQuery .length property to determine if your selector matched anything in the webpage.

 
if ( $( "#idDiv" ).length ) {
  alert("idDiv exists!!");
}else{
  alert("Does not exists!!");
}

 
<Div id="idDiv">Div selector with ID</div>

Try it Yourself

Div selector with ID

Div selector with Class

Full Source

 
<html>
<head>
<title>jQuery if exists example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#bt1").click(function(){
    if ( $( "#idDiv" ).length ) {
      alert("idDiv exists!!");
    }else{
      alert("Does not exists!!");
    }
  });
  $("#bt2").click(function(){
    if ( $( ".classDiv" ).length ) {
      alert("classDiv exists!!");
    }else{
      alert("Does not exists!!");
    }
  });
});
</script>
</head>
<body>
<Div id="idDiv">Div selector with ID</div>
<button id="bt1">Test ID Selector</button><br>
<Div class="classDiv">Div selector with Class</div>
<button id="bt2">Test Class Selector</button>
</body>
</html>

jQuery show() method

In jQuery , it isn't always necessary to test whether an element exists or not . The following code will show the element if it exists, and do nothing (with no errors) if it does not exists.

 
$("#idDiv" ).show();

Javascript

In JavaScript, you can use the following JavaScript to test whether an element exists or not.

 
if(document.getElementById("show()") !== null)
{
    //code
}

Next : How do I check if an HTML element is empty using jQuery?