Why there is no exists() in jQuery and how to check an element without errors

Why there is no exists() in jQuery and how not to break your code

Everyone who has written jQuery at least once has encountered this: you try to access an element that is not on the page, and you get an error, the script crashes, the user sees a blank screen. Naturally, the question arises: "Is there an exists() function in jQuery?"

This question is a real hit on Stack Overflow (over 150 thousand views). And the answer will surprise you: no, jQuery does not have a built-in exists() method. But this is not a bug, it's a feature. In this article, we will break down why this is the case, what mistakes beginners (and not only) make, and how to properly check for element existence. Let's go!

Short answer: "Length" is everything

The simplest and most correct way to check if an element exists on the page is to use the length property. If the jQuery object contains at least one element, length will be greater than zero, which evaluates to true in a boolean context.

if ($('#my-element').length) {\n    // Element exists — we can work with it\n    $('#my-element').show();\n} else {\n    // Element does not exist — do nothing\n    console.log('Element not found');\n}

Why does this work? jQuery returns an array-like object. If the selector finds nothing, the length of this object is 0. 0 in JavaScript is false.

You can write it even shorter:

if ($('#my-element').length > 0) {\n    // This also works, but is redundant\n}

Top 5 mistakes when checking element existence in jQuery

Mistake #1: Directly accessing a non-existent element

The most common and dangerous mistake is trying to call a method on an empty jQuery object:

// Code that will crash with an error\n$('#nonexistent').text('Hello!');

Actually, this code will not crash. jQuery is designed so that calling methods on an empty object simply does nothing. But here's the problem: if you try to get a value, for example .val(), you will get undefined. And if you try to access the DOM element by index, you will get a Cannot read properties of undefined error.

// But this is already dangerous!\nvar text = $('#nonexistent').text(); // returns an empty string\nvar value = $('#nonexistent').val(); // returns undefined\n\n// And this is a guaranteed error\nvar firstClass = $('#nonexistent')[0].className; // TypeError!

Mistake #2: Using $(selector).size()

Previously, jQuery had a .size() method that returned the number of elements. It was deprecated as early as jQuery 1.8 and completely removed in version 3.0. Using it now is bad practice and a compatibility risk.

// Bad (deprecated code)\nif ($('.my-class').size() > 0) { ... }\n\n// Good (modern approach)\nif ($('.my-class').length) { ... }

Mistake #3: Confusing .is() with filtering

The .is() method checks whether the current element matches a selector. It does not check for element existence in general, but works with already found elements. Beginners often write something like this:

// Incorrect: .is() does not replace existence check\nif ($('#my-element').is('*')) {\n    // Does the element exist?\n}

This will work, but it looks strange and is inefficient. .is('*') simply checks that the element is any tag. If the element exists, it returns true; if not, it returns false. But why go through such complexity when .length exists?

Mistake #4: Checking via document.getElementById

Some developers mix vanilla JavaScript and jQuery when it's not necessary:

// Redundant and ugly\nif (document.getElementById('my-element')) {\n    $('#my-element').addClass('acti