1500

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

Improve this question
2
  • 62
    .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. Commented 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. Commented Dec 20, 2018 at 8:43

8 Answers 8

Reset to default
2042

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

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

CSS selectors are used therefore "#elementId" selects by element. "elementId" would actually select all emenets whose tags are named "elementId"
@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).
@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.
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.
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').
|
510

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 }
Improve this answer

5 Comments

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.
in some ways, jquery made leaps and bounds for making javascript more accessible, but is still very far from being idiomatic
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?
You could just write a more intuitive function:function exists(elementName) { return $(elementName).length; }
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
217

Try this:

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

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

Improve this answer

6 Comments

No need for > 0, if it's 0 it will evaluate to false.
I can't get this to work without including > 0. Any ideas why that might happen?
sorry for mistaken downvote ill fix it later
@wessamelmahdy verbosity can increase clarity, which can reduce the cognitive cost of maintenance
if ($("#mydiv").length === 0){ because types
|
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.

Improve this answer

3 Comments

that's not working for me. browser I use is firefox 32.02.
feel free to paste your snippet
thanks, no problem anymore. I have replace it with this one stackoverflow.com/a/21801090/2232458
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){}
Improve this answer

7 Comments

You don't need != null as querySelector will always return null (which is falsey) or an element
I would still use if (document.querySelector("elemId") != null ) just to improve code readability
@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.
@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 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.
|
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'); }
Improve this answer

Comments

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

Improve this answer

1 Comment

You don't need instanceof Object
-20

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

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

4 Comments

If element did not exists, how can you check for the class.
wow did not see that answer coming
This answer should get a golden badge for the most funniest answer of SO :))
This answer is so usefull because it tells you what to not do.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.