jQuery - Check if DOM element already exists

Question

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

if      some element   length     0          If exists then do manipulations

User · Answer

if ID is available - You can use getElementById      var element    document getElementById  elementId      if  typeof element      undefined   amp  amp  element    null               exists        OR Try with Jquery -   if    document  find yourElement  length    0          -- Not Exist

User · Answer

Guess you forgot to append the item to DOM   Check it HERE

User · Answer

gt        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

[jquery] jQuery - Check if DOM element already exists

Examples related to jquery