如何使用 jQuery append() 执行大量 DOM 插入（以正确的顺序）？答案

【问题标题】：How to perform extensive DOM insertion with jQuery append() (in the correct order)?如何使用 jQuery append() 执行大量 DOM 插入（以正确的顺序）？
【发布时间】：2011-05-16 17:13:51
【问题描述】：

当我使用 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>

【问题讨论】：

标签： jquery html append dom-manipulation

【解决方案1】：

这里要记住的重要一点是.append() 不附加 HTML，它附加由您传入的 HTML 生成的 DOM 元素，因此例如 <ul> 将是 @987654325 @元素就像你看到的那样。

要使其与当前的间隔相似，您需要附加每一行或使用\，如下所示：

$("<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.

【讨论】：

第三个选项是["line1", "line2", "line3"].join("")
@Sime - 没错，虽然这种方法开销较小，但这里没有运行时工作:)

【解决方案2】：

使用简单的 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

【讨论】：

【解决方案3】：

您需要先构建完整的字符串，然后将其传递给 append：

 // 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);

有更有效的方法来构建该字符串，但是......你明白了。

【讨论】：

【解决方案4】：

jQuery append 被设计为与 HTML 的完整 sn-p 一起工作。仅将您的代码修改为 all append() 一次，然后将所有代码连接在一起传递。如果不这样做，append() 将自动关闭所有打开的标签。

【讨论】：

【解决方案5】：

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

【讨论】：