如果我有需要添加的DOM元素列表，有沒有一種方法可以在添加之前先將它們組合在一起？

Question

給出以下代碼：

li = random_object["li_element"] 
other = other_object["p_element"]
...
// I have a bunch of objects above, all of which were initially created and stored as jQuery objects, e.g.,
// random_object["li_element"] = $("<li>test</li>")

$("#target").append(li)
$("#target").append(other)

我知道.append()是一種昂貴的方法，所以我想知道是否有一種方法可以首先按上述順序組合上述元素li和other ，然后立即將它們全部附加？

Answer 1

是的，無論是在jQuery中還是在直接使用DOM時。

使用jQuery

您可以使用簽名來創建一個jQuery對象， 該簽名接受一個包裝這兩個元素的數組 ，然后附加它：

$("#target").append($([li[0], other[0]]));

[0]用於將原始元素而不是jQuery對象放入數組中。 $()接受DOM元素數組，但不接受jQuery對象。 如果這些jQuery對象中可能包含多個元素，則需要做更多的工作。 使用ES2015 +：

$("#target").append($([...li.get(), ...other.get()]));

僅使用ES5：

var array = li.get();
array.push.apply(array, other.get());
$("#target").append($(array));

現場示例：

 var li = $("<li>li</li>"); var other = $("<li>other</li>"); $("#target").append($([li[0], other[0]])); 

 <ul id="target"></ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

直接使用DOM

使用DOM，您可以創建文檔片段並將其附加：

var fragment = document.createDocumentFragment();
fragment.appendChild(li[0]);
fragment.appendChild(other[0]);
document.getElementById("target").appendChild(fragment);

片段的內容被附加，而不是片段本身。

同樣， [0]是，所以我們訪問原始DOM元素而不是jQuery對象。 再說一次，如果li和/或other有多個元素，則需要處理：

var fragment = document.createDocumentFragment();
li.each(function() {
    fragment.appendChild(this);
});
other.each(function() {
    fragment.appendChild(this);
});
document.getElementById("target").appendChild(fragment);

現場示例：

 var li = $("<li>li</li>"); var other = $("<li>other</li>"); var fragment = document.createDocumentFragment(); fragment.appendChild(li[0]); fragment.appendChild(other[0]); document.getElementById("target").appendChild(fragment); 

 <ul id="target"></ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

我知道.append()是一種昂貴的方法

並不是特別重要，但是如果您有一些對性能至關重要的代碼和許多附加內容，則將它們構建在一個片段中，然后附加該片段確實會減少開銷。