我有一个刷新元素队列的函数——每个元素都必须由 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() - 同样的效果。
最佳答案
参见 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"
您必须构建整个字符串并立即插入。
关于jQuery 非常奇怪的行为 - 输出 html 的顺序与 append 顺序不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6556537/