注意：

Question

在某些情况下，我尝试生成内容，但元素是兄弟姐妹。所以，我想生成兄弟的标签，然后只需将1个元素附加到实际的DOM中以减少DOM调用。

例如（从元素生成开始）：

var tr = $('<tr>');
var td = $('<td>')
                .append( $('<label>Label 1</label>') )
                .append( "some text" );
tr.append(td);

var tr2 = $('<tr>');
var td2 = $('<td>')
                .append( $('<label>Label 2</label>') )
                .append( "other text" );
tr2.append(td2);

这将为第一个tr元素生成类似于此的内容：

<tr>
     <td>
          <label>Labe 1</label>
          some text
     </td>
</tr>

，第二个元素看起来很相似。这很好，但我的问题是有没有办法将第二个添加到第一个，然后只需要将第一个附加到dom中的实际表中？

希望做类似的事情：

$('#someTable').append( /*append 1 thing instead of both tr's*/ );

如果有大量元素，那么想法是减少对实际DOM的调用。

注意：我意识到document.createElement比$更快（＆＃39;创建元素＆＃39;）

Answer 1

您只需使用add创建一个包含两个集合中元素的新集合。例如：

tr = tr.add(tr2);

在此之后，tr现在将包含两行。然后你可以立即追加它们：

$("#someTable").append(tr);  // add all rows contained in tr

Answer 2

实现这一目标的方法有很多种。我建议首选的方法是在你的表上使用detach，进行你的DOM操作（添加一堆<tr>），然后重新添加到你的DOM。这实际上是jquery performance中描述的方法。

注意：

我最初建议使用insertAfter或after作为此问题的解决方案，但OP的要求之一是避免创建＆＃34;中间＆＃34;家长。因此，这两种方法都不是有效的解决方案。我已经改进了上述解决方案。

Answer 3

因为理想情况下tr元素是tbody的子元素，你可以将所有tr添加到tbody然后最后将一个tbody添加到表中：

var tbody = $('<tbody/>');
tbody.append( tr )
.append( tr2 );

JQuery生成兄弟姐妹的元素，然后一次追加所有元素

3 个答案:

注意：