2

jQueryappend()メソッドを使用すると、生成される 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>
4

5 に答える 5

3

ここで覚えておくべき重要なことは、.append()HTML を追加するのではなく、渡した HTML によって生成されたDOM 要素を追加するということです。たとえば、はご覧のような要素<ul>になり<ul></ul>ます。

現在と同じようにスペースを空けるには、各行を追加するか、次の\ように使用する必要があります。

$("<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');

ここでテストできます。

于 2010-11-27T23:19:57.837 に答える
3

以下のような単純な 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

于 2010-11-27T23:20:09.527 に答える
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);

その文字列を構築するためのより効率的な方法がありますが...アイデアはわかります。

于 2010-11-27T23:19:10.983 に答える
0 
<script>
$('#a').html(your_html);
</script>
于 2010-11-28T03:30:52.307 に答える
0

jQuery append は、HTML の完全なスニペットで動作するように設計されています。コードをすべて append() に一度だけ変更し、すべてのコードを連結して渡します。そうしないと、append() は開いているタグを自動的に閉じます。

于 2010-11-27T23:19:35.243 に答える