How can I check if an element with a specific ID already exists in my DOM inside an Angular directive? By using angular.element() an element is created if one does not exist, for example angular.element('someID') will return an element whether one already exist or not.

What I am doing now as a workaround is using the .html() jqLite function like this:

if(angular.element('#someElementID').html()) {

console.log('only fires if element already exists');

}

Is there a better way to do this? I would like to avoid including the whole jQuery just for this.

How can I check if an element with a specific ID already exists in my DOM inside an Angular directive? By using angular.element() an element is created if one does not exist, for example angular.element('someID') will return an element whether one already exist or not.

What I am doing now as a workaround is using the .html() jqLite function like this:

if(angular.element('#someElementID').html()) {

console.log('only fires if element already exists');

}

Is there a better way to do this? I would like to avoid including the whole jQuery just for this.

• javascript
• angularjs
• jqlite

• Did you try angular.element($document).find('#someElementID') ? – DrDyne Commented Jun 20, 2014 at 15:25
• No, but I did now. Same result, creates an object. – Dimitris Commented Jun 20, 2014 at 15:27
• 1 I just tried that in the console, both angular.element($document).find('#someElementID') and angular.element('#someElementID') return an empty array. You should be pretty safe doing the following: if ( angular.element('#someElementID').length ) { console.log('#someElementID exists'); } – DrDyne Commented Jun 20, 2014 at 15:29
• True it's an array, thanks for pointing it out. Feel free to post an answer otherwise I'll do it later to close the question. – Dimitris Commented Jun 20, 2014 at 15:32
• The Angular documentation (which I find quite poor by the way) added to my confusion since it mentions that angular.element() returns a jQuery object and not an array: docs.angularjs.org/api/ng/function/angular.element – Dimitris Commented Jun 20, 2014 at 19:13

2 Answers 2

Both angular.element($document).find('#someElementID') and angular.element('#someElementID') return an empty array, in case several dom nodes matched the selector.

You should be pretty safe doing the following:

if ( angular.element('#someElementID').length ) {
    console.log('#someElementID exists');
}

Also keep in mind that jQLite .find() method only supports tag names.

I have tested, its working fine..

If the ID is Exists, it return 1

ID is not Exists, it return 0

if(angular.element('#someElementID').length >0){
 console.log("Id is available.");
}else{
  console.log("Id is not available.");
}