jQuery 非常奇怪的行为 - 输出 html 的顺序与 append 顺序不同

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

参见 documentation :

This method uses the browser's innerHTML property.

您不能先设置开始标签，然后再添加结束标签。浏览器正在通过自动添加结束标签来更正开始标签。

您不只是设置 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"

您必须构建整个字符串并立即插入。