如何在DOM中移动元素？ [英] How to move an element in the DOM?

问题描述

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

I have an element #superWidget in the DOM that is very interactive. It uses jquery UI sortable, draggable, and a bunch of other plugins.

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

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

I want to change the position of #superWidget in the DOM. I want to remove it from #wrapperB and place it in #wrapperA.

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

我尝试了以下...

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

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

...however this breaks a lot of the plugins.

我不想重新绑定所有内容。有更好的方法吗？ （我注意到，jquery UI排序可以以某种方式在DOM中移动元素，而不会破坏任何交互性...必须有一种方式。）

I do not want to have to rebind everything. Is there a better way to do this? (I notice that jquery UI sortable is somehow able to move elements around in the DOM without breaking any interactivity... there must be a way.)

感谢（提前） ）为您的帮助

Thanks (in advance) for your help

推荐答案

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

Rather than duplicating, just do this:

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

这篇关于如何在DOM中移动元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！