jQuery生成同級元素，然后一次附加所有元素

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比$（'create element'）快得多

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的要求之一是避免創建“中間”父級。 因此，這兩種方法都不是有效的解決方案。 此后，我已經改進了上述解決方案。

Answer 3

由於理想上tr元素是tbody的子元素，因此您可以將所有tr都添加到tbody中，然后最后將一個tbody添加到表中：

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