在不复制/克隆的情况下将 DOM 元素链接到另一个元素答案

【问题标题】：Linking a DOM element to another element without copying/cloning在不复制/克隆的情况下将 DOM 元素链接到另一个元素
【发布时间】：2013-03-13 14:17:25
【问题描述】：

我有一个 HTML 文件，其中包含几个定期更新的计算密集型图表。 HTML 文件通过使用 JavaScript 和类似选项卡的界面仅显示整个内容的一小部分。

我的代码如下所示：

<a href="">Tab1</a> <a href="">Tab2</a> <a href="">Tab3</a>
<div>
    <div id="tab1">
        charts
    </div>
    <div id="tab2">
        charts
    </div>
    <div id="tab3">
        charts
    </div>
</div>

现在我想（例如）在 tab3 中显示 tab1 的一些内容。我无法复制/克隆它们，因为它会使用太多资源。每次选项卡更改时，我都考虑在 tab1 和 tab2 之间移动 DOM 节点。但这不是很方便。还有其他解决方案吗？我可以以某种方式“链接”到另一个 DOM 元素的内容吗？

【问题讨论】：

我看到的唯一解决方案是给它们绝对定位，并在标签更改时调整css。
你确定克隆渲染的图表有那么密集吗？
重新思考标签的工作方式如何？也许您的标签应该更像按钮，并且您可以根据单击的标签隐藏/显示页面上的元素（而不是每个标签激活不同的 div）。
@BradM 我想过，但它会使布局和显示几个不同的元素变得相当复杂。
@isherwood 目前，我画了大约 30 个图表，Chrome 不再觉得很活泼。所以我怀疑克隆将是一个可行的解决方案。

标签： javascript dom element

【解决方案1】：

或者如何在需要时使用 appendTo() (http://api.jquery.com/appendTo/) 将您的表示从一个选项卡移动到另一个选项卡？

【讨论】：

【解决方案2】：

更新：

在关于 DOM4 突变事件处理程序的 SO 上查看这个答案。或许更符合你的需要。

Is there a JavaScript/jQuery DOM change listener?

【讨论】：

我可能会嗅探原始元素的变化而不是运行 setTimeout，尤其是如果它是一个相当复杂的结构。
在这种情况下不是一个好的解决方案。正如我所说，这些图表是计算密集型的，您的代码只是定期复制它们。然后浏览器必须绘制两个图表，而不是一个又需要更多资源的图表。