如果我有一个需要追加的DOM元素列表,在追加之前有没有一种方法可以先组合它们?

是的,既在jquery中,也在直接使用DOM时。

使用jquery

可以使用创建jquery对象 the signature accepting an array 包装这两个元素,然后附加它:

$("#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() 是一种昂贵的方法

不是特别的,但是如果您有一些非常关键的性能代码和很多要附加的东西,那么在片段中构建它们,然后附加片段可以减少开销。