95

Checking if a div exists is fairly simple

if(document.getif(document.getElementById('if')){

}

But how can I check if a div with the given id does not exist?

Wilson
  • 8,570
  • 20
  • 66
  • 101

9 Answers9

159
var myElem = document.getElementById('myElementId');
if (myElem === null) alert('does not exist!');
Jimbo Jonny
  • 3,549
  • 1
  • 19
  • 23
  • 1
    Many thanks. I'm using AngularJS and Bootstrap modal windows, for some reason JQuery couldn't find elements in the modal window. Vanilla JS worked fine. – krex Mar 26 '14 at 19:11
81
if (!document.getElementById("given-id")) {
//It does not exist
}

The statement document.getElementById("given-id") returns null if an element with given-id doesn't exist, and null is falsy meaning that it translates to false when evaluated in an if-statement. (other falsy values)

nu everest
  • 9,589
  • 12
  • 71
  • 90
Esailija
  • 138,174
  • 23
  • 272
  • 326
  • 4
    Hi Esailija, I reckon you could be the best answer if you added detail to why "!" works well. Perhaps saying that it returns null, which is falsy. +1 from me. – Alex KeySmith Aug 29 '13 at 14:12
  • 7
    @CommandZ: Why force people to Google it, when a simple inline explanation would be faster. Besides, I believe what Alex is getting at is that `null` evaluates to `false`, which isn't common knowledge (C# is a language where `null` does not equal false). – Doug S Jun 11 '14 at 04:49
  • 1
    @DougS `null` does not equal to `false` even in coercive equality comparison - the call to `ToBoolean(null)` returns `false` – Esailija Jun 11 '14 at 07:07
13

Check both my JavaScript and JQuery code :

JavaScript:

if (!document.getElementById('MyElementId')){
    alert('Does not exist!');
}

JQuery:

if (!$("#MyElementId").length){
    alert('Does not exist!');
}
Chinmay235
  • 3,236
  • 8
  • 62
  • 93
10

Try getting the element with the ID and check if the return value is null:

document.getElementById('some_nonexistent_id') === null

If you're using jQuery, you can do:

$('#some_nonexistent_id').length === 0
Hristo
  • 45,559
  • 65
  • 163
  • 230
  • 2
    Is there a reason you couldn't just do `!document.getElementById('foo')`? – Snuffleupagus Jun 04 '12 at 18:27
  • @ElatedOwl It can happen that you can perform operation on many inputs, and you want to check if they exists. It would be pointless to `document.getElementById()` then. – Danon May 08 '15 at 12:20
4

getElementById returns null if there is no such element.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
3

There's an even better solution. You don't even need to check if the element returns null. You can simply do this:

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

That code will only log exists to console if the element actually exists in the DOM.

1

That works with :

 var element = document.getElementById('myElem');
 if (typeof (element) != undefined && typeof (element) != null && typeof (element) != 'undefined') {
     console.log('element exists');
 }
 else{
     console.log('element NOT exists');
 }
Ema.H
  • 2,862
  • 3
  • 28
  • 41
0

I do below and check if id exist and execute function if exist.

var divIDVar = $('#divID').length;
if (divIDVar === 0){ 
    console.log('No DIV Exist'); 
} else{  
    FNCsomefunction(); 
}
Cyber
  • 2,194
  • 4
  • 22
  • 41
0

All these answers do NOT take into account that you asked specifically about a DIV element.

document.querySelector("div#the-div-id")

@see https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

sMyles
  • 2,418
  • 1
  • 30
  • 44