Check if element exists in jQuery

JavascriptJquery

Javascript 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
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionNickView Question on Stackoverflow
Solution 1 - JavascriptSarfrazView Answer on Stackoverflow
Solution 2 - JavascriptTapan kumarView Answer on Stackoverflow
Solution 3 - JavascriptGaurav123View Answer on Stackoverflow
Solution 4 - Javascriptlfender6445View Answer on Stackoverflow
Solution 5 - JavascriptMehran HatamiView Answer on Stackoverflow
Solution 6 - JavascriptloopmodeView Answer on Stackoverflow
Solution 7 - JavascriptWebomatikView Answer on Stackoverflow
Solution 8 - JavascriptDesignForLifeView Answer on Stackoverflow