如何移动 DOM 中的元素？

Question

我在 DOM 中有一个非常互动的元素 #superWidget。 它使用 jquery UI 可排序、可拖动和一堆其他插件。

<div id="wrapperA"></div>
<div id="wrapperB">
  <div id="superWidget"></div>
</div>

我想在 DOM 中更改#superWidget 的 position。 我想将其从#wrapperB 中删除并将其放在#wrapperA 中。

<div id="wrapperA">
  <div id="superWidget"></div>
</div>
<div id="wrapperB"></div>

我尝试了以下...

var copy = $("#superWidget").clone(true, true);
$("#superWidget").remove();
$("#wrapperA").append(copy);

...但是这破坏了很多插件。

我不想重新绑定一切。 有一个更好的方法吗？ （我注意到 jquery UI sortable 能够以某种方式在 DOM 中移动元素而不会破坏任何交互性......必须有办法。）

在此先感谢您的帮助

Answer 1

而不是重复，只需这样做：

document.getElementById('wrapperA').appendChild(document.getElementById('superWidget'));