1490

How do I check if an element exists if the element is created by .append() method? $('elemId').length doesn't work for me.

2
  • 60
    .length works just fine, see here: jsfiddle.net/yahavbr/A9zW2 if you did use # post your code and we'll see what you done wrong. Jan 4, 2011 at 13:26
  • 1
    Use $('#selector').length and $('.selector').length for id and class selector. $('#selector option').size() to check dropdown size.
    – Majedur
    Dec 20, 2018 at 8:43

8 Answers 8

2028

$('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.

8
  • 49
    CSS selectors are used therefore "#elementId" selects by element. "elementId" would actually select all emenets whose tags are named "elementId" Dec 13, 2012 at 7:13
  • 8
    @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). Dec 12, 2013 at 22:40
  • 5
    @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
    Jan 6, 2014 at 17:59
  • 8
    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. Mar 4, 2014 at 21:47
  • 3
    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
    Aug 8, 2015 at 5:41
500

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
}
5
  • 28
    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
    Jul 22, 2014 at 20:08
  • 3
    in some ways, jquery made leaps and bounds for making javascript more accessible, but is still very far from being idiomatic Sep 5, 2014 at 3:45
  • 4
    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? Nov 7, 2016 at 21:01
  • 3
    You could just write a more intuitive function:function exists(elementName) { return $(elementName).length; } Feb 15, 2017 at 11:21
  • This throws an exception in the console. jquery.min.js:2 jQuery.Deferred exception: Cannot read property 'length' of undefined TypeError: Cannot read property 'length' of undefined Apr 12, 2021 at 12:22
211

Try this:

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

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

6
  • 34
    No need for > 0, if it's 0 it will evaluate to false. Dec 25, 2016 at 15:08
  • I can't get this to work without including > 0. Any ideas why that might happen?
    – KillahB
    Aug 1, 2017 at 6:03
  • sorry for mistaken downvote ill fix it later Feb 8, 2020 at 14:00
  • @wessamelmahdy verbosity can increase clarity, which can reduce the cognitive cost of maintenance Nov 17, 2021 at 13:05
  • 1
    if ($("#mydiv").length === 0){ because types
    – HaveAGuess
    Nov 22, 2021 at 18:49
92

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.

3
32

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){}
7
  • You don't need != null as querySelector will always return null (which is falsey) or an element
    – 1j01
    Jun 21, 2015 at 22:05
  • I would still use if (document.querySelector("elemId") != null ) just to improve code readability
    – Mrinmoy
    Nov 30, 2017 at 20:00
  • 1
    @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. Nov 30, 2017 at 21:39
  • @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
    Dec 18, 2017 at 22:45
  • @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. Dec 19, 2017 at 10:12
20

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');
}
16

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

1
  • 7
    You don't need instanceof Object
    – 1j01
    Jun 21, 2015 at 22:06
-20

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

if( $('.exists_content').hasClass('exists_content') ){
 //element available
}
4
  • 14
    If element did not exists, how can you check for the class.
    – Pir Abdul
    Apr 22, 2015 at 5:56
  • 2
    wow did not see that answer coming Apr 4, 2018 at 8:59
  • This answer should get a golden badge for the most funniest answer of SO :))
    – Mohsen
    Jun 16, 2020 at 14:35
  • This answer is so usefull because it tells you what to not do. Apr 6, 2022 at 12:42

Not the answer you're looking for? Browse other questions tagged or ask your own question.