1

好的，所以我有3个div...

<div id="video"></div>
<div id="info"></div>
<div id="chat"></div>

我正在使用 jQuery 在按下按钮时移动 div。

$('#chat').insertBefore('#video');

我对此有一个问题。我相信这个函数的作用是复制/克隆chatdiv，将其插入videodiv 之前，然后销毁原始chatdiv。然而，这并不好用，因为很明显，chatdiv 包含一个聊天室。

所以它的克隆和销毁方式加载了一个新的聊天元素，这不仅占用了大量资源，而且由于它的实例不同，还迫使用户重新登录聊天室。

有没有办法以非破坏性的方式移动 div？没有克隆和破坏？某种物理移动div的方法？

4

4 回答 4

1

你可以试试原生insertBefore：

var video = document.getElementById('video'),
    chat  = document.getElementById('chat');

video.parentNode.insertBefore(chat, video);

在一个完美的世界中，jQuery 方法应该以这种方式工作。但是如果你 f.ex 有多个目标并且 jQuery 是“不错的”，也许这种方式会为你的情况提供一些启示......

于 2013-07-17T23:06:19.427 回答
1

恐怕如果不重新加载它的内容，就不可能将 IFRAME 从 DOM 中的一个地方移动到另一个地方。

insertBefore动态内容有问题，特别是如果您要处理
IFRAMES

带聊天的 LIVE DEMO

如果您单击将insertBefore()iframe 元素的 SWAP，
您会注意到 iframe 内容会刷新
，您的聊天应用程序（模块）也会发生同样的情况

于 2013-07-17T23:20:58.730 回答
0

我以不同的方式解决了这个问题。由于人们确认，如果不重新加载它的内容，就不可能将 iFRAME 从 DOM 中的一个地方移动到另一个地方......

我没有在 DOM 中移动 div，而是将其留在原处并将“位置：绝对”应用于我想要在顶部的 div，强制它到顶部。

于 2013-07-18T06:02:15.660 回答
0

来自 jQuery 网站的文档insertBefore说明如下。

如果以这种方式选择的元素被插入到 DOM 中其他位置的单个位置，它将在目标之前移动（未克隆） ，并返回由插入元素组成的新集合。

以上陈述适用于您的情况。所以你div的没有被破坏或克隆。

但是，如果有多个目标元素，则会在第一个目标之后为每个目标创建插入元素的克隆副本，并返回新集合（原始元素加上克隆）。

如果元素被插入到许多目标之前，它将被克隆。

于 2013-07-17T22:59:39.110 回答