javascript - 从 DOM 中分离对象内容，添加其他内容，然后 append 到 DOM

Question

我有这个:

div#origin
   span
   span

div#final

我需要将内容与“origin”分离，添加一些额外的跨度，然后使用 jQuery 将所有内容 append 到“final”。

我怎样才能做到这一点。我正在搜索，但也许我用了错误的术语，因为我没有得到答案。

感谢任何进一步的帮助。

Answer 1

您可以使用追加将子元素和新定义的元素移动到其新的父元素:

JS Fiddle

var children = $('#origin').children();
var extra = '<span class="extra">Extra Stuff</span>';

// This will move the children to the new parent and add the extra variable defined
$('#final').append(children, extra); 

<小时/>

另一个可能根据您的需求增加灵 active 的选项是克隆子项并在需要时 append 它:

JS Fiddle - clone() and append()

var children = $('#origin').children();
var cloned = children.clone(true,true); // Store a copy of the children to be appended
var extra = '<span class="extra">Extra Stuff</span>';

children.remove(); // Remove the old non-cloned children
$('#final').append(cloned, extra); // append cloned and extra elements