Question

我有这个：

div#origin
   span
   span

div#final

我需要从＆＃34; origin＆＃34;中分离内容，添加一些额外的跨度，然后将所有内容追加到＆＃34; final＆＃34;用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>

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

2 个答案: