What does an empty div mean in Jquery or Javascript [duplicate]

Question

I have the following empty div inside my html page:

<div id='onlineaccess' style='width:20em;'>
</div>

I need to dynamically update this div with html, but before I do, I need to see if it is empty or not. I have written the following JQuery and Javascript code for this:

if($('#onlineaccess').is(':empty') ) 
{alert('No HTML inside of onlineaccess div');}
else
{alert('Some HTML inside of onlineaccess div');}

but this does not yield the result I am looking for if the div is empty.

if($('#onlineaccess').is(':empty') ) 
{alert('No HTML inside of onlineaccess div');}
else
{alert('Some HTML inside of onlineaccess div');}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='onlineaccess' style='width:20em;'>
    </div>

This alerts the second message even if the div is empty. Can anyone explain to me why is it so and how can I get the first message into the alert?

Thanks in advance for help.

:empty: "Select all elements that have no children (including text nodes)" — Andreas
– Andreas, Commented Feb 11, 2017 at 14:19

Rikin · Accepted Answer · 2017-02-11 14:22:52Z

2

https://api.jquery.com/empty-selector/

if($('#onlineaccess:empty') ) 
{alert('No HTML inside of onlineaccess div');}
else
{alert('Some HTML inside of onlineaccess div');}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='onlineaccess' style='width:20em;'>
    </div>

answered Feb 11, 2017 at 14:22

Rikin

5,4842 gold badges17 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:33:42Z

2

It's the line break. Seems some browsers interpret this differently than others.

Write it this way:

<div id='onlineaccess' style='width:20em;'></div>

and you get your intended behaviour.

Related: How do I check if an HTML element is empty using jQuery?

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Feb 11, 2017 at 14:22

mwallisch

1,8392 gold badges22 silver badges31 bronze badges

2 Comments

Andreas Over a year ago

Instead of marking this question as a duplicate you post the duplicate as part of your answer? O.o

mwallisch Over a year ago

Don't know how to do that.

William Valhakis · Accepted Answer · 2017-02-11 14:26:26Z

1

var check = !$.trim( $('#div').html() ).length;

if (check) {
  console.log('no html');
} else {
  console.log('some html');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id='div' style='width:20em;'>
</div>

answered Feb 11, 2017 at 14:26

William Valhakis

3702 silver badges8 bronze badges

Comments

ScaisEdge · Accepted Answer · 2017-02-11 14:21:32Z

0

You should get the html() content of your id so should be

  if($.trim($('#onlineaccess').html()) ==='' )

answered Feb 11, 2017 at 14:21

ScaisEdge

133k10 gold badges98 silver badges111 bronze badges

Comments

jetpackpony · Accepted Answer · 2017-02-11 14:25:13Z

0

The div is actually not empty, it has a text node inside which counts as non-empty contents. Use this insead:

$(document).ready(function () {
  if ($("#onlineaccess").html() === "") {
    console.log('empty');
  } else {
    console.log('not empty');
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='onlineaccess' style='width:20em;'>
</div>

answered Feb 11, 2017 at 14:25

jetpackpony

1,2801 gold badge12 silver badges22 bronze badges

Collectives™ on Stack Overflow

What does an empty div mean in Jquery or Javascript [duplicate]

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Linked

Hot Network Questions