Отделить объект контента из DOM, добавить другие, а затем добавить к DOM

Question

У меня есть это:

div#origin 
    span 
    span 

div#final 

Мне нужно, чтобы отделить содержание от «происхождения», добавить некоторые дополнительные диапазон, а затем добавить все «окончательный» с jQuery.

Как я могу это сделать. Я искал, но, возможно, я сделал это с неправильными терминами, потому что я не получил ответа.

Спасибо за помощь.

Answer 1

Вы можете использовать Append для перемещения детей и вновь определенные элементы своего нового родительского элемента:

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); 

---

Другой вариант, который мог бы добавить больше гибкости в зависимости от того, что ваши потребности является клонировать детей и добавить его, когда вам нужно:

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 

Answer 2

Это должно сделать трюк:

var data1 = $("#span1").text(), 
 
    data2 = $("#span2").text(), 
 
    other = "Whatever else you wanted" 
 
$("#span1").remove() 
 
$("#span2").remove() 
 
$("#final").append("<span>" + data1 + "</span>") 
 
$("#final").append("<span>" + data2 + "</span>") 
 
$("#final").append("<span>" + other + "</span>")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="orgin"> 
 
    <span id="span1">span</span> 
 
    <span id="span2">span</span> 
 
</div> 
 

 
<div id="final"> 
 
</div>