jQuery append（）を使ってDOMを広範に挿入する方法（正しい順序）

Question

jQuery append()メソッドを使用すると、生成されるHTML出力は意図した順序ではありません。

以下のテストケースで確認したように、私はDIVタグを開いていないといつでも閉じています。

<ul>タグも同じです（私が期待する前に閉じていたタグ）。それは、その下にネストされていると考えられる2番目の<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>