Why does jQuery remove the <img> element?

Question

I am using jQuery with the BlockUI plugin to block the page after clicking the link. I also use the DOM element to display a message when the page is locked.

Here is 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 am facing is that when I set the .text()item <div id="progressMessage" />, the item <img src="spinbar.gif" />seems to be deleted. I checked that this is happening with Firebug.

I also tried using <span>instead <div>for progressMessage, but the result is the same.

Can someone explain why this is happening?

Answer 1

DIV, .

Answer 2

-

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

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

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

Answer 3

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

Answer 4

You can use .append to add text

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

. append ()