我试图找出是否可以使用.appendTo()将多个jquery对象添加到现有的div容器中。例如，我的代码示例目前喜欢这样
var parentContainer = $("<div id = 'some_id'></div>"),
topHalf = $("<div id = 'tophalf'></div>"),
bottomHalf = $("<div id = 'bottomhalf'><?div>");
(topHalf,bottomHalf).appendTo(parentContainer);
显然它现在不能正常工作，这就是问题所在。如果我(bottomHalf).appendTo(parentContainer)，它运作良好。我只是想知道是否有办法将这样的多个对象附加到一行代码中的更大容器中。
我不想让bottomHalf和topHalf拥有自己的代码行来拆分它。顺便说一下，我也希望在某个时间点（最多5或6）这样做两次以上，所以它可以非常快地重复。谢谢！
答案 0 :(得分：5)
您可以使用append执行此操作：
parentContainer.append(topHalf, bottomHalf);
但是，如果你真的非常喜欢使用appendTo，你可以先将add()下半身转到topHalf，然后拨打appendTo：
topHalf.add(bottomHalf).appendTo(parentContainer);
答案 1 :(得分：0)
您也可以使用documentFragments。 jQuery自己在幕后使用它，甚至用于追加，但它们也鼓励它的使用，甚至使用追加功能，这样你就可以在插入dom之前将它用作装饰集合的对象，从而导致一个dom reflow是昂贵的，所以你只想做一次或尽可能少。在实际插入浏览器dom之前，有条件逻辑用于确定要附加哪些部分时，文档片段也会有所帮助。
<强>追加（）
您的具体示例可能看起来像这样：
$(function () {
var documentFragment = $(document.createDocumentFragment());
var parentContainer = documentFragment.append($("<div id='some_id'>parentContainer</div>"));
var topHalf = $("<div id='tophalf'>topHalf</div>");
var bottomHalf = $("<div id='bottomhalf'>bottomHalf<?div>");
/*
https://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment
You can decorate the documentFragment based on your specific conditions, then based on criteria and conditions you always pass one object to be attached to the dom. Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow (computation of element's position and geometry). Consequently, using document fragments often results in better performance.
*/
parentContainer.append(topHalf, bottomHalf);
// only one 'reflow' causing dom append. all the previous ones are behind the scenes and allow you to construct and build without reflows. documentFragment is very helpful for decorating objects and then using them to do a final append that actually does cause a reflow.
$('#result').append(parentContainer);
});
工作示例：http://jsfiddle.net/suhnmm6b/6/
<强> AppendTo（）
以下是使用appendTo（）的反转，但仍然使用documentFragment集合，然后将其作为一个对象附加到父容器。
$(function () {
var documentFragment = $(document.createDocumentFragment());
var parentContainer = $("<div id='some_id'>parentContainer</div>");
var topHalf = documentFragment.append($("<div id='tophalf'>topHalf</div>"));
var bottomHalf = documentFragment.append($("<div id='bottomhalf'>bottomHalf<?div>"));
/*
https://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment
You can decorate the documentFragment based on your specific conditions, then based on criteria and conditions you always pass one object to be attached to the dom. Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow (computation of element's position and geometry). Consequently, using document fragments often results in better performance.
*/
(documentFragment).appendTo(parentContainer);
// only one 'reflow' causing dom append. all the previous ones are behind the scenes and allow you to construct and build without reflows. documentFragment is very helpful for decorating objects and then using them to do a final append that actually does cause a reflow.
$('#result').append(parentContainer);
});
工作示例：http://jsfiddle.net/z34yzk7x/3/
的参考文献：