Check if element exists in jQuery [duplicate]

$('elemId').length doesn't work for me.

You need to put # before element id:

$('#elemId').length
---^

With vanilla JavaScript, you don't need the hash (#) e.g. document.getElementById('id_here') , however when using jQuery, you do need to put hash to target elements based on id just like CSS.

• CSS selectors are used therefore "#elementId" selects by element. "elementId" would actually select all emenets whose tags are named "elementId" - Petr Gladkikh
• @trejder Most likely the poster was unaware of Vanilla JS and when they said "vanilla JavaScript" they actually meant base JavaScript ("vanilla" as in "plain", "unadorned). - D Coetzee
• @trejder Looks like "Vanilla JS" is exactly the same as base Javascript anyway (the downloaded file is always empty) - someone just decided to make a sales pitch for base Javascript. - Brilliand
• Yeah, that website is mocking the need for a framework called "Vanilla JS" which is nothing but JavaScript itself. @trejder should read a little more carefully. - LasagnaAndroid
• You "don't need the hash" only if you use the wrong function. document.querySelector('#id_here') requires the hash sign just as much as the jQuery equivalent $('#id_here'). - AndreKR

Try to check the length of the selector, if it returns you something then the element must exists else not.

 if( $('#selector').length )         // use this if you are using id to check
{
     // it exists
}


 if( $('.selector').length )         // use this if you are using class to check
{
     // it exists
}

• I find this approach to be so unintuitive. It's almost like asking how to determine if a number is negative, and then someone telling you that you need to write the code in assembly and then manually twiddle some bits in the CPU's registers, instead of simply calling a method like .isNegative(). Checking the value of a 'length' property clutters things up. I'd rather see something like a .exists() method, which is instantly recognizable while scanning through code. - Aquarelle
• in some ways, jquery made leaps and bounds for making javascript more accessible, but is still very far from being idiomatic - lfender6445
• This solution is perfectly intuitive. The length property tells you how many elements match the query. What is not intuitive or straight-forward about that? - Alice Wonder
• You could just write a more intuitive function:function exists(elementName) { return $(elementName).length; } - Sinister Beard

Try this:

if ($("#mydiv").length > 0){
  // do something here
}

The length property will return zero if element does not exists.

• No need for > 0, if it's 0 it will evaluate to false. - Wessam El Mahdy
• I can't get this to work without including > 0. Any ideas why that might happen? - KillahB

How do I check if an element exists

if ($("#mydiv").length){  }

If it is 0, it will evaluate to false, anything more than that true.

There is no need for a greater than, less than comparison.

• that's not working for me. browser I use is firefox 32.02. - KeepMove
• feel free to paste your snippet - lfender6445
• thanks, no problem anymore. I have replace it with this one stackoverflow.com/a/21801090/2232458 - KeepMove

your elemId as its name suggests, is an Id attribute, these are all you can do to check if it exists:

Vanilla JavaScript: in case you have more advanced selectors:

//you can use it for more advanced selectors
if(document.querySelectorAll("#elemId").length){}

if(document.querySelector("#elemId")){}

//you can use it if your selector has only an Id attribute
if(document.getElementById("elemId")){}

jQuery:

if(jQuery("#elemId").length){}

• You don't need != null as querySelector will always return null (which is falsey) or an element - 1j01
• I would still use if (document.querySelector("elemId") != null ) just to improve code readability - Mrinmoy
• @Mrinmoy your mindset is either coming from Java or C#. In JavaScript we know we have seven falsy values (0, -0, null, undefined, '', NaN and false) and considering those falsy values if (document.querySelector("elemId") != null ) has no effect in writing a more readable code. In JavaScript world instead of keeping your mindset from structural programming languages like Java or C# it is highly recommended to get to know the conventions of JavaScript community. For a JavaScript developer in this specific case != null is totally redundant and much less readable. - Mehran Hatami
• @MehranHatami , so you are agreeing that the code is readable only by a javaScripter, still he will be left confused if querySelector() returns null or 0 or any of the other 5 values. querySelectorAll() and jQuery has a different return value when it dont find an element. Please consider that people these days work on polyglot of techs and frameworks so making things more readable is sure to benefit. By the way I am more a javascripter than a java/golang programmer - Mrinmoy
• @Mrinmoy I agree that this is a debatable topic BUT what I said was not my opinion than a fact. in my team, if I see a pull request which has ` != null ` I don't approve it. Although it is a convention BUT it has become a rule, sort of. To me what matters the most is to make sure the developer in my team knows the basics and their code is consistent with no redundancy. ` != null` to me is like ` != false` which is a valid condition for an if statement BUT it redundant in itself. - Mehran Hatami

You can also use array-like notation and check for the first element. The first element of an empty array or collection is simply undefined, so you get the "normal" javascript truthy/falsy behaviour:

var el = $('body')[0];
if (el) {
    console.log('element found', el);
}
if (!el) {
    console.log('no element found');
}

You can use native JS to test for the existence of an object:

if (document.getElementById('elemId') instanceof Object){
    // do something here
}

Don't forget, jQuery is nothing more than a sophisticated (and very useful) wrapper around native Javascript commands and properties

• You don't need instanceof Object - 1j01

If you have a class on your element, then you can try the following:

if( $('.exists_content').hasClass('exists_content') ){
 //element available
}

• If element did not exists, how can you check for the class. - Pir Abdul
• wow did not see that answer coming - Munkhdelger Tumenbayar