How to check if an element with id exists or not in jQuery?

Question

I'm generating a div dynamically and I've to check whether a dynamically generated div exists or not ? How can I do that?

Currently I'm using the following which does not detects the div generated dynamically. It only detects if there is already an element with the id contained in the HTML template.

$(function() {
    var $mydiv = $("#liveGraph_id");
    if ($mydiv.length){
        alert("HHH");
    }
});

How can I detect the dynamically generated div?

Do you have control over the div that is generated automatically? If so perform the step when the element is added — PSL, Sep 11 '13 at 00:37
by `detect the dynamically generated div`, what do you exactly want to detect? — jasonslyvia, Sep 11 '13 at 00:39
If you want to know when it's added to the `document`, http://stackoverflow.com/a/11546242 might be useful. http://caniuse.com/mutationobserver — Jonathan Lonowski, Sep 11 '13 at 00:41
place that code in a function and give it a directive to check. You can user setInterval, or an event listener, etc. But hte method you have is correct. That will detect and serve your needs — Kai Qing, Sep 11 '13 at 00:46
Well, I'm trying to generate the div like this in python `portlet_div_str += " — Praful Bagai, Sep 11 '13 at 00:47
In your case you can try something like this http://jsfiddle.net/9FW9Z/ using Mutation observer, but it is not supported in all the browsers. — PSL, Sep 11 '13 at 00:48
@PSL - Not working. since it is not supported by all the browsers, hence cannot take it as a solution. Thanks — Praful Bagai, Sep 11 '13 at 00:54
@ArunPJohny - Yaa I know I need to execute it after the element has been added and there lies my question. How do I do that? — Praful Bagai, Sep 11 '13 at 00:55
jonathan just did. alvaro also gave an example of an event listener — Kai Qing, Sep 11 '13 at 01:06

Jonathan Lonowski · Answer 1 · 2013-09-11T01:10:53.053

11

If mutation observes aren't an option due to their browser compatibility, you'll have to involve the code that's actually inserting the <div> into the document.

One options is to use a custom event as a pub/sub.

$(document).on('document_change', function () {
    if (document.getElementById('liveGraph_id')) {
        // do what you need here
    }
});

// without a snippet to go on, assuming `.load()` for an example
$('#container').load('/path/to/content', function () {
    $(this).trigger('document_change');
});

edited Sep 11 '13 at 01:10

answered Sep 11 '13 at 01:05

Jonathan Lonowski

121,453
34
200
199

What does path to content means? – Praful Bagai Sep 11 '13 at 03:57
@user1162512 It's just a sample URL path. You mentioned in a comment that the `
` is written in Python, so assumed Ajax was involved in retrieving it.
– Jonathan Lonowski Sep 11 '13 at 03:59
No. Ajax is not involved in this particular case. I'm just forwarding this string of HTML elements onto the template when the page first loads or if I refresh the page. This is how I 'm doing. `return render_to_response('dashboard/widget_dashboard.html',{'HTMLstr':HTMLstr}, context_instance = RequestContext(request))` and in the template I'm calling that string of HTML elements by `{% if HTMLstr %} {% autoescape off %}{{ HTMLstr }}{% endautoescape %} {% else %}` – Praful Bagai Sep 11 '13 at 04:08

score 3 · Answer 2 · answered Sep 11 '13 at 00:57

3

If it is added dinamically, you have to test again. Let's say, a click event

$("#element").click(function()
{
    if($("#liveGraph_id").length)
        alert("HHH");
});

answered Sep 11 '13 at 00:57

Álvaro Martínez

1,047
7
10

1

Test whenever you want to check if it exists. `$(function() {...})` is executed after the DOM has been loaded. If you add an element later, you must run the test again. (Not necesarily on a click event) – Álvaro Martínez Sep 11 '13 at 01:02
why was this downvoted? It look slike it's just an example of an event listener – Kai Qing Sep 11 '13 at 01:04

score 0 · Answer 3 · edited Sep 11 '13 at 01:06

0

How you inserting your dynamic generated div?

It works if you do it in following way:

var div = document.createElement('div');
div.id = 'liveGraph_id';
div.innerHTML = "i'm dynamic";
document.getElementsByTagName('body')[0].appendChild(div);
if ($(div).length > 0) {
    alert('exists'); //will give alert
}
if ($('#liveGraph_id').length > 0) {
    alert('exists'); //will give alert
}
if ($('#liveGraph_id_extra').length > 0) {
    alert('exists'); //wont give alert because it doesn't exist.
}

jsfiddle.

edited Sep 11 '13 at 01:06

R P

33
1
6

answered Sep 11 '13 at 00:55

Rameez

1,712
2
18
39

Well, I'm already aware of this, but I'm not creating the div in the jQuery but in the python(backend). Here is how I'm doing. `portlet_div_str += "
– Praful Bagai Sep 11 '13 at 00:58
2

but how you adding it in document? without adding you can't check if its exist or not. – Rameez Sep 11 '13 at 01:02
I call it in the template using django syntax `{{{% autoescape off %}{{ portlet_div_str }}{% endautoescape %}}}` – Praful Bagai Sep 11 '13 at 01:03

score 0 · Answer 4 · answered Sep 11 '13 at 02:25

Just for interest, you can also use a live collection for this (they are provided as part of the DOM). You can setup a collection of all divs in the page (this can be done in the head even before the body is loaded):

var allDivs = document.getElementsByTagName('div');

Any div with an id is available as a named property of the collection, so you can do:

if (allDivs.someId) {
  // div with someId exists
}

If the ID isn't a valid identifier, or it's held in a variable, use square bracket notation. Some play code:

<button onclick="
  alert(!!allDivs.newDiv);
">Check for div</button>
<button onclick="
  var div = document.createElement('div');
  div.id = 'newDiv';
  document.body.appendChild(div);
">Add div</button>

Click the Check for div button and you'll get false. Add the div by clicking the Add div button and check again—you'll get true.

Just love those drive–by down votes. Ok, no jQuery (hence "just for interest"), but what else? — RobG, Sep 11 '13 at 06:03

score 0 · Answer 5 · answered Jun 29 '17 at 18:54

0

is very simple as that

   if(document.getElementById("idname")){
//div exists 

}

or

    if(!document.getElementById("idname")){
//  don't exists
}

answered Jun 29 '17 at 18:54

user3510753

31
4

How to check if an element with id exists or not in jQuery?

5 Answers5