如何使用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>