How to check if a specific div element is created or not?

Question

I want to check if following code is dynamically created or not :

<div id="js_contact_error_message" style="display: block;">
  <div class="error_message"> <!-- For this div only I want to apply the above written inline css-->
              Please enter full name
  </div>

How should I check this in jQuery? If it's present execute the if condition.

Thanks.

The condition that <div class="error_message">...</div> is present within <div id="js_contact_error_message" style="display: block;">...</div> must get checked.

I tried below code but it didn't work for me:

if ($("#js_contact_error_message").find("div.error_message").length != 0) { 
          alert("Bestow");
      }

possible duplicate of [$(this) selector and children?](http://stackoverflow.com/questions/306583/this-selector-and-children) — kumarharsh, Jan 05 '15 at 05:59

Bharadwaj · Answer 1 · 2015-01-05T06:29:30.620

1

Try,

For using if-else condition.

if($("#js_contact_error_message").find(".error_message").length > 0)
{
    alert("div present");
}
else
{
    alert("div not present");
}

But as you stated in your question, you want to apply specific inline css. Make a class for the style what you have and you can use the ollowin code.

$("#js_contact_error_message").find(".error_message").addClass("your_style_class");

This code will apply your css class only for those divs which match the condition.

EDIT:

If you want to add your style to the div, you can try defining it in your page, which will apply as soon as the div is added dynamically.

<style>
    #js_contact_error_message .error_message
    {
         /*your inline style*/
    }
</style>

edited Jan 05 '15 at 06:29

answered Jan 05 '15 at 06:00

Bharadwaj

2,535
1
22
35

As the
Please enter full name
is getting created dynamically length property is not working. – Jan 05 '15 at 06:02
if length is not working then you may be calling it in a wrong place. – Cerlin Jan 05 '15 at 06:04
@PHPNut when is your dynamic `div` gettin created? – Bharadwaj Jan 05 '15 at 06:05
After form submission. – Jan 05 '15 at 06:08
@phpnut do you have css class with the name `error_message` in your current page? – Bharadwaj Jan 05 '15 at 06:10
When the page loads it doesn't. When the pop-up loads still it doesn't. When the user submits form then the div with class name error_message gets created. If I check length on form submit I get 0 since the div has yet to be created. This is the issue. – Jan 05 '15 at 06:15
@PHPNut no, not that, I am asking do you have defined style with the class name `error_message`? – Bharadwaj Jan 05 '15 at 06:16
This class is getting applied to the div when it gets created. The file containing the class error_message has already been added. – Jan 05 '15 at 06:18
@PHPNut do you have style defenition for that class? in style sheets or in style tag? Try my edited code, and remove all above `jquery` code. – Bharadwaj Jan 05 '15 at 06:26

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

You can do this:

var hasDiv = $("#js_contact_error_message div").length > 0 ? true : false;

$("#js_contact_error_message").toggle(hasDiv);

Note:

You need to place this line of code where you have done your js validations.

or you may try with this:

$(document).on('DOMSubTreeModified propertychange',function(){
     var hasDiv = $("#js_contact_error_message div").length > 0 ? true : false;
     $("#js_contact_error_message").toggle(hasDiv);
});

score 0 · Answer 3 · answered Jan 05 '15 at 06:01

0

if($("#js_contact_error_message .error_message").length > 0)
{
    alert("div is present");
}
else
{
    alert("div is not present");
}

Demo

answered Jan 05 '15 at 06:01

Sadikhasan

18,365
21
80
122

The length property will not work since the
Please enter full name
is getting generated dynamically. – Jan 05 '15 at 06:04

score 0 · Answer 4 · answered Jan 05 '15 at 06:02

You can check it in many ways.. few of them are :

Use $("#js_contact_error_message").has('div') function of jquery to get the specific element Has in JQuery
If the error message div is the only div to be inside the main div then you can check it as :

Check the element $("#js_contact_error_message").html() is blank or use $("#js_contact_error_message").children() (Children in JQuery) to check if it has any childrens.

Hope this helps :)

score 0 · Answer 5 · answered Jan 05 '15 at 06:20

0

make sure your html composition is correct , opening and closing. Then try this code.

if($("#js_contact_error_message").length > 0)
{
  $("#js_contact_error_message").find(".error_message").addClass("style_class");
}

answered Jan 05 '15 at 06:20

Dyah Isnaeny

31
2

How to check if a specific div element is created or not?

5 Answers5

Note: