Почему jQuery удаляет мой элемент <img>?

Question

Я использую jQuery с плагином BlockUI, чтобы заблокировать страницу после нажатия на ссылку. Я также использую элемент DOM для отображения сообщения, когда страница заблокирована.

Вот простой пример используемого кода:

<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>

Проблема, с которой я сталкиваюсь, заключается в том, что когда я устанавливаю .text() элемента <div id="progressMessage" />, элемент <img src="spinbar.gif" />, кажется, удаляется. Я убедился, что это на самом деле происходит с помощью Firebug.

Я также пытался использовать <span> вместо <div> для progressMessage, но результат тот же.

Кто-нибудь может объяснить, почему это происходит?

Answer 1

Не делайте самозакрывающийся DIV, он не действителен.

Answer 2

Самозакрытие - проблема

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

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

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

Answer 3

div id = "progressMessage" перезаписывает img, когда ему присваивается текст. используйте <div id="progressMessage"></div> вместо

Answer 4

Вы можете использовать .append, чтобы добавить текст

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

.append ()