How to Check If An Element Exists in JQUERY – Detailed Guide

Published on: | Last updated on: January 4, 2023 | By:

Element is component in a HTML document . You need to check if the element exists before accessing it to avoid null or undefined error.

You can check if an element exists in JQuery using if ($('#elementId').length) statement.

Basic Example

if ($('#elementId').length){
  // Do something if element exists
}

In this tutorial, you’ll learn how to check if an element exists in JQuery.

When using JQuery, you need to use $() or JQuery() to denote its a jquery object and prefix # in the element id to select the element using its ID.

Adding JQuery Reference

Add the below reference to the Jquery script.

Otherwise, you’ll get Uncaught ReferenceError: $ is not defined error when trying to access the elements using $.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Check If Element Exists by ID

In this section, you’ll use jquery to check if an element exists using element id and the length property.

The jquery length property returns the number of matched elements with the specified id.

  • Prefix # in the element id and access the length property to find the number of elements available with ID.

When using this statement within if,

  • if construct will be evaluated to True when there is one or more element with the id.
  • If no element with a specified id is available, it’ll return 0. This will evaluate the if statement to false.

Code

Use the following statement to check if the element with id elementid is available in the HTML document.

if ($('#elementId').length){
  // Do something if element exists
}

Check If Element Exists in Array

In this section, you’ll use JQuery to check if an element exists in the array.

  • Select the object with id using the $, and the element with the specific id will be returned as an array.
  • In the array, check the first position of the array.
  • If the element exists, the element itself will be available in the array. Hence, the if statement will be evaluated to True, and you can execute your desired statements inside the if construct.
  • If the element is NOT available, an undefined value will be returned, and the if statement will not be executed.

Code

if ( $('#elementId')[0] ) {
  // Do something if element exists
}

Check If Element Exists by Class

If you would like to check if an element exists by using its class name, use the length property.

if ($('#elementclass').length){
  // Do something if class exists
}

If you would like to check if an object with a specific class exists in a div, then you can use the following code.

  • It checks if an element with a class name elementclass exists in div.
if ($('div.elementclass').length) {
    // Do something if class exists
} else {
    // Do something if class does not exist
}

Check If Element Exists by Name

You can use the same length property to check if an element exists using the element name.

  • Use the #elementname in the selector

Code

if ($('#elementname').length){
    // Do something if element name exists
}

Check If Dynamic Element Exists

You can use the selector and the length property to check if a dynamic element exists.

  • Populate the dynamic element name in a variable
  • Use that variable in the selector

Code

var dynamic_ele_name = '#' + 'dynamic_element_name';
  if ($(dynamic_ele_name)[0]) {
    // Do something if dynamic element name exists
  }

JSfiddle

This tutorial is available in this JSFiddle.

Additional Resources

Leave a Comment