[jquery] 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.

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');}

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
}

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.

(()=> {
    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.

Guess you forgot to append the item to DOM.

Check it HERE.

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.

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
}

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

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
}

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...