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 withID
.
When using this statement within if
,
- if construct will be evaluated to
True
when there is one or more element with theid
. - If no element with a specified id is available, it’ll return
0
. This will evaluate the if statement tofalse
.
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 toTrue
, and you can execute your desired statements inside theif
construct. - If the element is NOT available, an
undefined
value will be returned, and theif
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 indiv
.
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.