Why is jQuery deleting my <img> element?

Question

I'm using jQuery with the BlockUI plugin to block a page after a link is clicked. I'm also using a DOM element to display a message when the page is blocked.

Here's a simple example of the code used:

<a id="testme" href="#">Click Me</a>

<script type="text/javascript">
    $(document).ready(function() {
     $('#testme').click(function() {
      // Set our message in the message panel....
      $('#progressMessage').text('Please wait!');
      $.blockUI({
       message: $('#progressWidget')
      });
     });
    }
</script>

<div id="progressWidget" style="display:none" align="center">
    <div class="modalUpdateProgressMessage">
     <div id="progressMessage" />
     <img src="spinbar.gif" />
    </div>
</div>

The problem I'm encountering is that when I set the .text() of the <div id="progressMessage" /> element, the <img src="spinbar.gif" /> element seems to get removed. I've verified that this is actually happening using Firebug.

I've also tried using a <span> instead of a <div> for progressMessage but the result is the same.

Can anyone explain why this is happening?

Thanks
Kev

Answer 1

You can use .append to add the text

$('#progressMessage').text('Please wait!');

.append()

Answer 2

Don't do a self-closing DIV, it's not valid.

Answer 3

The div id="progressMessage" overwrites the img when it is assigned a text. use <div id="progressMessage"></div> instead

Answer 4

The self closing is the problem

$("#selector").append("<div>"); //fail

$("#selector").append("<div/>"); //fail

$("#selector").append("<div></div>"); //SUCCESS!