jquery insertAfter into collection (not in DOM)

Question

在这个例子中，我需要将#source2容器中的元素#B添加到变量elements中，但在元素#A之后

，不起作用。

但是在下面的第二个示例中，如果我先将 #B 元素插入到source1可以正常工作的容器中，但我不需要将#B附加到 source1 容器中，我也想避免每次将 #B 元素重新附加到 #source2(或克隆 -> 追加 -> 删除(

问题是：如何在 DOM 中直接插入集合变量？

//EXAMPLE 1
var elements = $('#source1').children();
var cloned = $('#B').clone(true,true);
cloned.insertAfter(elements.find('#A'));
console.log('example1',elements.length); //show #A and #C ... Expected #A,#B,#C
//EXAMPLE 2
//This work but I don't need to append #B into source1 container
$('#B').insertAfter($('#A'));
elements = $('#source1').children();
//here I need every time to re-append #B element into #source2 and I try to avoid that
$('#B').appendTo('#source2');
console.log('example2',elements.length); //show as expected #A,#B,#C

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="source1">
	<div id="A">
		A
	</div>
	<div id="C">
		C
	</div>
</div>
<div id="source2">
	<div id="B">
		B
	</div>
</div>

Answer 1

最后我

通过将整个容器source1克隆到elements变量来解决它

我变了

var elements = $('#source1').children();

跟

var elements = $('#source1').clone();

    var elements = $('#source1').clone();
    var cloned = $('#B').clone();
    cloned.insertAfter(elements.find('#A'));
    //Now I can select all childrens  #A,#B,#C
    elements = elements.children();
    console.log(elements.length); // = 3 and show as Expected #A,#B,#C

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="source1">
	<div id="A">
		A
	</div>
	<div id="C">
		C
	</div>
</div>
<div id="source2">
	<div id="B">
		B
	</div>
</div>