CODEWITHSUNDEEP
jquery
Dan
Dan

Reputation: 1085

jQuery - Check if DOM element already exists

I am trying to add some form elements dynamically via Ajax with jQuery. I want to make sure that I don't create the same element twice, so I only want to add it if it hasn't already been added to the DOM.

All of my elements have a unique CSS id, for example:

$('#data_1')

I am using the following to check if the element already exists:

if ($('some_element').length == 0) {
    //Add it to the dom
}

However, it only works for elements which were already part of the page when it first loaded.

How do I also check for elements which were dynamically created after the page was loaded?

Any advice is appreciated.

Thanks.

Upvotes: 87

Views: 147042

Answers (10)

oliiix
oliiix

Reputation: 149

Also think about using

$(document).ready(function() {});

Don't know why no one here came up with this yet (kinda sad). When do you execute your code??? Right at the start? Then you might want to use upper mentioned ready() function so your code is being executed after the whole page (with all it's dom elements) has been loaded and not before! Of course this is useless if you run some code that adds dom elements after page load! Then you simply want to wait for those functions and execute your code afterwards...

Upvotes: -3

Collector
Collector

Reputation: 2094

This question is about whether an element exists and all answers check if it doesn't exist :) Minor difference but worth mentioning.

Based on jQuery documentation the recommended way to check for existence is

if ($( "#myDiv" ).length) {
    // element exists
}

If you prefer to check for missing element you could use either:

if (!$( "#myDiv" ).length) {
    // element doesn't exist
}

or

if (0 === $( "#myDiv" ).length) {
    // element doesn't exist
}

Note please that in the second option I've used === which is slightly faster than == and put the 0 on the left as a Yoda condition.

Upvotes: 30

Inzmam ul Hassan
Inzmam ul Hassan

Reputation: 215

No to compare anything, you can simply check that by this...,.

if(document.getElementById("url")){ alert('exit');}
if($("#url")){alert('exist');}

you can also use the html() function as well like

if($("#url).html()){alert('exist');}

Upvotes: 0

Thielicious
Thielicious

Reputation: 4452

(()=> {
    var elem = document.querySelector('.elem');  
    (
        (elem) ? 
        console.log(elem+' was found.') :
        console.log('not found')
    )
})();

If it exists, it spits out the specified element as a DOM object. With JQuery $('.elem') it only tells you that it's an object if found but not which.

Upvotes: 1

Dipti S
Dipti S

Reputation: 1

if ($('#some_element').length === 0) {
    //If exists then do manipulations
}

Upvotes: 0

Markoj
Markoj

Reputation: 243

In this case, you may want to check if element exists in current DOM

if you want to check if element exist in DOM tree (is attached to DOM), you can use:

var data = $('#data_1'); 
if(jQuery.contains(document.documentElement, data[0])){
    // #data_1 element attached to DOM
} else {
    // is not attached to DOM
}

Upvotes: 1

Ishan Jain
Ishan Jain

Reputation: 8171

if ID is available - You can use getElementById() 

var element =  document.getElementById('elementId');
  if (typeof(element) != 'undefined' && element != null)
  { 
     // exists.
  }

OR Try with Jquery - 

if ($(document).find(yourElement).length == 0) 
{ 
 // -- Not Exist
}

Upvotes: 4

sree
sree

Reputation: 2367

Just to confirm that you are selecting the element in the right way. Try this one

if ($('#some_element').length == 0) {
    //Add it to the dom
}

Upvotes: 14

S L
S L

Reputation: 14328

Guess you forgot to append the item to DOM.

Check it HERE.

Upvotes: 6

rahul
rahul

Reputation: 187110

This should work for all elements regardless of when they are generated.

if($('some_element').length == 0) {
}

write your code in the ajax callback functions and it should work fine.

Upvotes: 121

Related Questions