javascript - 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