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

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

• javascript
• jquery
• dom

• You can write that like this too: var $el = $("<div>").addClass("someclass"); – noob Commented Jan 8, 2012 at 12:54
• 1 @micha or as var $el = $('<div>', { 'class': 'someClass'} ); – Alnitak Commented Jan 8, 2012 at 13:00

4 Answers 4

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.

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

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.

If you only want one element, you should really be using an ID with the element, and then checking for it in a similar way to how Michael has above. using

var el = $('<div id="someID" class="someClass" />');

I'm also not sure why you are using $el instead of just el