DOM内の要素を移動する方法は？

Question

DOMに非常にインタラクティブな要素#superWidgetがあります。並べ替え、ドラッグが可能なjquery UI、およびその他のプラグインを使用します。

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

DOM内の#superWidgetの位置を変更したい。 #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'));