jQuery Check if an Element Exists

jQuery code snippet to check whether a html element exists on the current web page. The easiest way i’ve found to do this is to check the length of an object to see if it exists in the DOM.


//check if an element exists by using length
if ($("#id").length) {
  //it does!
}
//or length equals zero
$('element').length == 0; // no element found
//or using plain javascript
document.getElementById('eid') != null)

Snazzy jQuery Function, Sir?


jQuery.fn.exists = function(){return jQuery(this).length>0;}
if ($(selector).exists()) {
    // Do something
}

Or to check a jQuery object array for presence:


if ( $('#myDiv')[0] ) { //do something }

Frequently Asked Questions about Checking if an Element Exists in jQuery

What is the significance of checking if an element exists in jQuery?

Checking if an element exists in jQuery is crucial in web development. It helps to prevent errors that may occur when trying to manipulate an element that does not exist on the page. For instance, if you try to hide an element that doesn’t exist, jQuery will throw an error. By checking if the element exists first, you can avoid such errors and ensure your code runs smoothly.

How can I use the .length property to check if an element exists?

The .length property in jQuery returns the number of elements that match a specified selector. If the element exists, .length will return a value greater than 0. If the element does not exist, .length will return 0. Here’s a simple example:

if ($('#myElement').length) {
// Element exists
} else {
// Element does not exist
}

Can I use the .size() method to check if an element exists?

Yes, you can use the .size() method to check if an element exists. However, it’s important to note that .size() has been deprecated in jQuery 1.8 and removed in jQuery 3.0. It’s recommended to use the .length property instead, as it performs the same function but is faster and more efficient.

What happens if I try to manipulate an element that does not exist?

If you try to manipulate an element that does not exist, jQuery will throw an error. This can disrupt the execution of your code and lead to unexpected results. Therefore, it’s always a good practice to check if an element exists before trying to manipulate it.

Can I check if multiple elements exist at once?

Yes, you can check if multiple elements exist at once by using a comma-separated list of selectors. If any of the selectors match an element on the page, .length will return a value greater than 0. Here’s an example:

if ($('#element1, #element2, #element3').length) {
// At least one element exists
} else {
// None of the elements exist
}

How can I check if an element does not exist?

You can check if an element does not exist by using the .length property and checking if it returns 0. Here’s an example:

if (!$('#myElement').length) {
// Element does not exist
} else {
// Element exists
}

Can I use the :exists selector to check if an element exists?

No, jQuery does not have an :exists selector. However, you can create a custom :exists selector using the jQuery.expr[‘:’].extend() method. But it’s generally easier and more efficient to use the .length property.

Can I check if an element exists within another element?

Yes, you can check if an element exists within another element by using the .find() method in combination with the .length property. Here’s an example:

if ($('#parentElement').find('#childElement').length) {
// Child element exists within parent element
} else {
// Child element does not exist within parent element
}

Can I check if an element exists using vanilla JavaScript?

Yes, you can check if an element exists using vanilla JavaScript by using the document.querySelector() or document.getElementById() methods. These methods return null if the element does not exist, so you can check if the returned value is null to determine if the element exists.

Can I check if an element exists on page load?

Yes, you can check if an element exists on page load by placing your code inside the $(document).ready() function. This function runs as soon as the DOM is fully loaded, so it ensures that all elements are available before your code runs.