如何使用Jquery将HTML从一个div移动到另一个div，而不会破坏Javascript？

Question

我有两个div，用于网页的不同部分：一个是工作区域，另一个是参考区域。其中一个大小固定，而另一个则是可变大小的，它们垂直堆叠。我想设计成这样：如果您想在参考窗格中工作，只需单击链接即可交换两个窗格之间的所有数据。我的想法是执行以下操作：

var working = $("#working_pane").html();
var ref = $("#reference_pane").html();

$("#working_pane").html(ref);
$("#reference_pane").html(working);

问题在于，似乎移动这些面板中引用的任何JavaScript（例如，编辑器）会导致其破损。没有JavaScript错误发生，只是好像JavaScript的连接已经断开。

有没有什么方法可以在不破坏包含的JavaScript的情况下移动HTML？

- KallDrexx

---

与其试图移动它们的内容，不如交换这两个div的位置（和/或CSS类），这样可能更容易些。 - Seth

我所看到的唯一方法是，由于两个面板都是垂直堆叠的，因此必须绝对定位div，但如果我修改整个页面的主页面/模板，则会很麻烦。然后，每次更改主页面时都必须修改div的位置。 - KallDrexx

Answer 1

在处理HTML文档的位（bits）时，应该尽可能使用节点对象而非HTML字符串，这些节点对象是浏览器视图中的内容。

浏览器需要查看节点并将它们序列化为字符串来获取HTML。当你使用 innerHTML 或 jQuery 的 html(...) 将HTML赋值给文档的另一个部分时，你正在告诉浏览器要销毁先前存在于元素中的所有内容，费力地将HTML字符串重新解析为一组新的节点对象，并将这些新节点插入到元素中。

这样做既慢，还浪费资源，还会丢失原始节点对象中不能在序列化HTML中表达的任何方面，例如：

• 事件处理函数/监听器（这就是为什么您的编辑器会出问题）
• 其他JavaScript代码对节点的变量引用（也会破坏脚本）
• 表单字段值（除了IE部分支持之外）
• 自定义属性

因此，无论你是使用jQuery还是纯DOM，都不要随意操作HTML！取得原始节点对象并将它们插入您想要的位置（它们会自动离开它们最初所在的位置）。引用保持不变，所以脚本将继续工作。

// contents() gives you a list of element and text node children
var working = $("#working_pane").contents();
var ref = $("#reference_pane").contents();

// append can be given a list of nodes to append instead of HTML text
$("#working_pane").append(ref);
$("#reference_pane").append(working);

- bobince

Answer 2

这可能是由于重复的id导致的。基本上，您可能在一个具有id = id1的div中有元素a，现在将其存储在var中并注入到新的div中。现在似乎您没有机制来确保您同时没有重复的id。这可能会破坏js。

因此，请查看此问题，并确保首先将元素存储在var中，然后删除原始元素并将其附加到新位置。

- makeitmorehuman

---

我尝试在html()调用的empty()之前添加了2行代码。但是仍然发生了相同的情况。通过Chrome开发工具检查元素时，标签的ID显示正确。 - KallDrexx