How to check if a dynamically created element already exists using jQuery?

Question

I create an element dynamically:

var $el = $('<div class="someclass"></div>');

I want to append the element ($el) somewhere, but it shouldn't have an id.

How do I know if it has been appended before or not?

edit
I thought this should work

if($($el, "#target").length == 0)
    $("#target").append($el);

but that was wrong

Solution 1

You can simply check to see if it has a parent:

var $el = $('<div class="someclass"></div>');
//Code you wrote that may or may not attach it to the DOM

if($el.parent().length === 0) {
    //The element has not been added to the DOM because it doesn't not have a parentNode
}

However, if you have no idea what is actually being done with the element, you may have other problems with your code.

Solution 2

If I understand, and you need to check if another <div class='someclass'> already exists before appending $el, you can do:

if ($("div.someclass").length === 0) {
  // it has not been created yet, create a new one
  var $el = $('<div class="someclass"></div>');
}

To check if it is already a child node of some other element, use .find()

if ($("#parentNode").find("div.someclass").length === 0 {
  // it has not been created yet, create a new one
  var $el = $('<div class="someclass"></div>');
}

Solution 3

If I understand you correctly, you wish to find whether this exact element is already in the DOM, rather than some other arbitrary element that happens to have the same class.

If so, I believe this will work.

First, get the originally created element as an HTMLElement object rather than a jQuery object:

var el = $el.get(0);

then try to .find() it in the doc:

var $match = $(document).find(el);
var found = ($match.length > 0);

this won't be efficient, though - restrict the selector document to a narrower part of your DOM if you can!

Your edit suggests you could use #target as that selector.

Comments

[Omid]

.someclass class may be used for other element, i just want to perform a check about this element with the same class.

[Michael Berkowski]

@OmidAmraei You can test the containing element to see if it is already there using .find("div.someclass")

[Alnitak]

using $el is a convention some programmers use to indicate that the variable is a jQuery object and not a native element. It reminds them that they needn't write $($el).method() and can just write $el.method() instead.

[Omid]

there could be some another elements with someclass in container

[Michael Berkowski]

@OmidAmraei Then you are going to need a better selector, such as an id attribute to find a more specific element.

[Alnitak]

@OmidAmraei then please knock out a minimal test case on jsfiddle.net that shows it.

[Alnitak]

@OmidAmraei p.s .find(element) requires jQuery 1.6 or later

[Omid]

I user jQuery 1.7 dear Alnitak

[Esailija]

This doesn't make any sense, he is creating the element out of thin air, therefore the exact same element cannot be in the dom.

[Alnitak]

@Esailija I was assuming that there was some (omitted) code that may have added $el and that he needs to know later whether that is indeed the case.

[Esailija]

@Alnitak then he should add that code as it changes the question completely, but for now this doesn't make sense. I am voting for close anyway :/. Also you can just simply check the .parentNode property for not null to see if an element is in the DOM.

[Omid]

@Esailija I think you're right man, it seems i have to choose an ID for my element

[Omid]

@Esailija simply should be a lot of <div class='someclass'> in the parent node. it make sense, but i think jQuery has no solution for that at least.