如何使用jQuery append（）（以正确的顺序）执行广泛的DOM插入？

Question

当我使用jQuery append()方法时，生成的HTML输出不是我想要的顺序。如您在下面的测试案例中看到的，任何时候我打开一个DIV标签而不关闭它，它仍然是关闭的。

<ul>标签也是如此 - 在我预期之前它也被关闭了 - 我希望它在第二个<li>标签之后关闭，该标签应该嵌套在它下面。

按照写入顺序构建大块动态HTML的最佳方法是什么？

$('#a').remove(); // remove #a from the dom and re-insert it dynamically 
$("<div id='a'>").insertAfter('div#main'); 

$('#a').append(" <ul>"); 
$('#a').append(" <li>A</li>"); 
$('#a').append(" <li>B</li>"); 
$('#a').append(" </ul>"); 
$('#a').append(" <div id='X1'>"); 
$('#a').append(" <div id='b'>"); 
$('#a').append("  <div id='b1'></div>"); 
$('#a').append("  <div id='b2'></div>"); 
$('#a').append(" </div>"); 
$('#a').append(" <div id='c'>"); 
$('#a').append("  <p id='c1'></p>"); 
$('#a').append(" </div>"); 
$('#a').append(" </div>"); 
$('#a').append(" <div id='X2'>B</div>"); 
$('#a').append("</div>"); 

<div id="main> 
    <div id="a> 
    <ul></ul> // <ul> tag is closed!? 
    <li>A</li> 
    <li>B</li> 
    <div id='X1'></div> // div is closed!? 
    <div id='b'> // div is closed!? 
    <div id='b1'></div> 
    <div id='b2'></div> 
    <div id='c'></div> // div is closed!? 
    <p id='c1'></p> 
    <div id='X2'>B</div> 
    </div> 
</div> 

Answer 1

你需要构建完整的字符串第一，然后传递到附加：

// this creates the div with id 'a', and inserts it into 
// the DOM (assuming you have an existing div with id 'main') 
// 
$("<div id='a'></div>").insertAfter('div#main'); 

// now you can build up additional content as a string... 
// 
var s = " <ul>"; 
s += " <li>A</li>"; 
s += " <li>B</li>"; 
s += " </ul>"; 
s += " <div id='X1'>"; 
s += " <div id='b'>"; 
s += "  <div id='b1'></div>"; 
s += "  <div id='b2'></div>"; 
s += " </div>"; 
s += " <div id='c'>"; 
s += "  <p id='c1'></p>"; 
s += " </div>"; 
s += " </div>"; 
s += " <div id='X2'>B</div>"; 

// now, use the append() function to create DOM from the string, 
// and append it to the content of your div#a all at once. 
// 
$('#a').append(s); 

有更有效的方式来建立一个字符串，但...你的想法。

Answer 2

jQuery append被设计为使用完整的HTML片段。只需将所有代码修改为所有append（），然后将所有代码连接在一起。如果你不这样做，append（）会自动关闭所有打开的标签。

Answer 3

这里要记住的重要一点是，.append()不追加HTML，它附加DOM元素通过你传递，因此，例如<ul>会像你看到一个<ul></ul>元素的HTML生成。

把它隔开相似，你有什么目前，您可能需要追加每行或使用\这样的：

$("<div id='a'>\ 
    <ul> \ 
     <li>A</li> \ 
     <li>B</li> \ 
    </ul> \ 
    <div id='X1'> \ 
    <div id='b'> \ 
     <div id='b1'></div> \ 
     <div id='b2'></div> \ 
    </div> \ 
    <div id='c'> \ 
     <p id='c1'></p> \ 
    </div> \ 
    </div> \ 
    <div id='X2'>B</div> \ 
    </div>").insertAfter('div#main'); 

You can test it out here。

Answer 4

使用一个简单的StringBuffer实现，比如下面的实现。一旦HTML已完全缓冲离线，其写入DOM一下子：

function StringBuffer() { 
    this.buffer = []; 
} 

StringBuffer.prototype.append = function append(string) { 
    this.buffer.push(string); 
    return this; 
}; 

StringBuffer.prototype.toString = function toString() { 
    return this.buffer.join(""); 
}; 

var buf = new StringBuffer(); 
buf.append('<ul>'); 
buf.append('<li>A</li>'); 
buf.append('</ul>'); 
...etc... 
$("#a").empty().html(buf.toString()); 

而看到：http://developer.yahoo.com/performance/rules.html

Answer 5

<script> 
$('#a').html(your_html); 
</script>