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

我有一个刷新元素队列的函数——每个元素都必须用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>' );
}

这没关系，但该操作后的HTML如下所示：

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

某物登录

而不是：

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

某物登录

你知道这是什么原因吗

早些时候，我尝试使用.append（）-效果相同。

请参阅：

此方法使用浏览器的

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"

>d=document.createElement（'div'）；
​​
>d.innerHTML=''；
""
>d.innerHTML+=“foo”；
“福”
>d.innerHTML+=''；
“福”
>d.innerHTML
“福”

---

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

问题在于，您试图将HTML放入DOM，就像它是HTML文档一样。当浏览器读取HTML页面时，它会将其转换为DOM结构。这是一个由相关节点组成的树状系统。它与原始HTML有一些相似之处，并且可以序列化为它，但是您不能只向其中添加HTML，并期望它像向原始文档添加内容一样工作

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

$（“#queue”）.html（$（“#queue”）.html（）+”；

这表示“在HTML的末尾添加一个

div

节点”。由于每个节点都必须关闭或自动关闭，因此浏览器会自动将其关闭

当您稍后添加

时，这是毫无意义的——结束标记不能单独存在，因此会被忽略

---

解决方案是将所有HTML添加到一起并一次性插入，或者从

appendUser

中修改

div

元素，我认为您必须立即构建一个字符串并输出到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>";
    }

this.refreshQueue=函数（）{
var输出=”；
for（self.queue中的变量id）{
输出+=“”；
output+=appendUser（self.queue[id].data）；
输出+=“”；
}
$（“#队列”）.html（输出）；
}
this.appendUser=函数（数据）{
返回“+data.login+”；
}

html（）

自动关闭所有未关闭的标记。因此，当您尝试添加更多

html

时，它已经关闭了

div

。为什么不直接使用

wrap（）

self.appendUser（self.queue[id].data）.wrap（$（''）.addClass（'queueelement'））.parent（）.appendTo（$（“#queue”）；

---

您可以让函数本身返回

$（'）”

元素您还可以将标记放入自己的变量中，然后将内部字符串添加到该div变量中，然后将其附加到容器div中

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

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

var div=$（“”）；
div.append（“某些登录”）；
$（“#out”）。追加（div）；

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

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

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