javascript - 如何移动 DOM 中的元素？

Question

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

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

我想改变#superWidget 在DOM 中的位置。我想将其从#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 中移动元素而不会破坏任何交互性......必须有一种方法。）

在此先感谢您的帮助

score 55 · Accepted Answer

与其复制，不如这样做：

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

1 回答 1