How to check for the presence of an element?

Question

I'm using the .length method in a conditional statement that polls the page for the presence of an externally-loaded object (I can't style it with jQuery until it exists):

function hackyFunction() {
  if($('#someObject').length<1)
  { setTimeout(hackyFunction,50) }
  else
  { $('#someObject').someMethod() }}

Is length the best way to do this?

Answer 1

If you are simply looking for a specific element you can just use document.getElementById

function hackyFunction() {
    if (document.getElementById("someObject")) {
         // Exist
    } else {
         // Doesn't exist
    }
}

Answer 2

Yes you should use .length. You cannot use if ($('#someObject')) ... because the jQuery selectors return a jQuery object, and any object is truthy in JavaScript.

Answer 3

Yes, .length is acceptable and is usually what I use.

Answer 4

If you're looking for an ID there should only ever be one of those, so you could also write:

if($('#someObject')[0])

Answer 5

With jQuery, checking length works fine.

if (!$('#someObject').length) {
    console.log('someObject not present');
}

Of course with vanilla JavaScript, you can just check with document.getElementById (if getting elements by id)

if (document.getElementById('someObject')) {
    console.log('someObject exists');
}