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

您可以使用the signature accepting an array包裹这两个元素来创建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()是一种昂贵的方法

并非特别如此，但是如果您有一些对性能至关重要的代码和许多附加内容，则将它们构建在一个片段中，然后附加该片段确实会减少开销。

如果我有需要添加的DOM元素列表，有没有一种方法可以在添加之前先将它们组合在一起？

1 个答案:

使用jQuery

直接使用DOM