jQuery очень странное поведение - вывод html не в том порядке, в котором он был добавлен

Question

У меня есть функция, которая обновляет очередь элементов - каждый из них должен быть представлен div, но для меня эффект - это полный WTF.Вот функция:

this.refreshQueue = function( ) {
    $("#queue").html('');
    for( var id in self.queue ) {
        console.log('Opening div');
        $("#queue").html( $("#queue").html()+'<div class="queueelement">');
        self.appendUser( self.queue[id].data );
        console.log('Closing div');
        $("#queue").html( $("#queue").html()+'</div>');
    }
} 

this.appendUser = function( data ) {
    console.log('Appending h4');
    $("#queue").html( $("#queue").html()+'<h4>'+data.login +'</h4>' );
}

Я вижу в журнале Firebug:

Opening div
Appending h4
Closing div

Это нормально, но HTML после этой операции выглядит так:

<div class="queueelement"></div>
<h4>Somelogin</h4>

Вместо:

<div class="queueelement">
<h4>Somelogin</h4>
</div>

Любые идеи, что вызывает это?

Раньше я пытался с .append () - тот же эффект.

Answer 1

См. Документацию :

Этот метод использует свойство браузера innerHTML.

Вы не можете установить открывающий тег, а затем добавить закрывающий тег. Браузер исправляет открывающий тег, автоматически добавляя закрывающий тег.

Вы не просто устанавливаете HTML (как текст), он также анализируется, и элементы DOM создаются и вставляются в дерево. Чтобы быть разборчивым, HTML должен быть правильным.

Это произойдет с любым методом, который вы используете. Вы также можете попробовать это в консоли:

> d = document.createElement('div');
  <div>​</div>​
> d.innerHTML = '<span>';
  "<span>"
> d.innerHTML += 'foo';
  "<span></span>foo"
> d.innerHTML += '</span>';
  "<span></span>foo</span>"
> d.innerHTML
  "<span></span>foo"

Вы должны собрать всю строку и сразу вставить ее.

Answer 2

Проблема в том, что вы пытаетесь поместить HTML в DOM, как если бы это был HTML-документ. Когда браузер читает страницу HTML, он преобразует ее в структуру DOM. Это древовидная система связанных узлов. Он имеет некоторое сходство с исходным HTML и может быть сериализован в него, но вы не можете просто добавить к нему HTML и ожидать, что он будет работать так, как если бы вы добавляли контент в исходный документ.

$("#queue").html( $("#queue").html()+'<div class="queueelement">');

Там написано "добавить div узел в конец HTML". Поскольку каждый узел должен быть закрыт или самозакрывающимся, браузер автоматически закрывает его.

Когда вы добавляете </div> позже, это бессмысленно - закрывающий тег не может существовать сам по себе, поэтому он игнорируется.

Решение состоит в том, чтобы добавить весь HTML-код и вставить его за один раз или изменить элемент div из appendUser.

Answer 3

Я думаю, вам придется сразу создать строку и вывести ее в html, вместо того, чтобы вставлять незаконченные элементы, используя .html().

Примерно так:

    this.refreshQueue = function () {
        var output = "";
        for (var id in self.queue) {
            output += "<div class=\"queueelement\">";
            output += appendUser(self.queue[id].data);
            output += "<\div>";
        }
        $("#queue").html(output);
    }

    this.appendUser = function (data) {
        return "<h4>" + data.login + "</h4>";
    }

Answer 4

Вы также можете поместить тег в его собственную переменную, а затем добавить свою внутреннюю строку в эту переменную div, а затем добавить ее в контейнер div.

    var div = $("<div class='elem'></div>");
    div.append("<h4>Some Login</h4>");

    $("#out").append(div);

http://jsfiddle.net/Gz3qR/

Answer 5

html() автоматически закрывает все незакрытые теги.Поэтому, когда вы попытаетесь добавить больше html, он уже закрыл div.Почему бы просто не использовать wrap()?

self.appendUser( self.queue[id].data ).wrap($('<div />').addClass('queueelement')).parent().appendTo($("#queue"));

Сама функция должна была бы просто вернуть элемент $('<h4 />)'