Check if element exists in jQuery
JavascriptJqueryJavascript Problem Overview
How do I check if an element exists if the element is created by .append()
method?
$('elemId').length
doesn't work for me.
Javascript Solutions
Solution 1 - Javascript
> $('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.
Solution 2 - Javascript
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
}
Solution 3 - Javascript
Try this:
if ($("#mydiv").length > 0){
// do something here
}
The length property will return zero if element does not exists.
Solution 4 - Javascript
> 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.
Solution 5 - Javascript
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){}
Solution 6 - Javascript
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');
}
Solution 7 - Javascript
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
Solution 8 - Javascript
If you have a class on your element, then you can try the following:
if( $('.exists_content').hasClass('exists_content') ){
//element available
}