是否可以在同一页面上查看一个 html 元素两次，或者我必须创建一个副本？

Question

我正在创建一个网站，允许查看和编辑“edit-div”中的“src-div”内容。我没有直接编辑 src-div，因为它使用 css zoom 属性进行了缩略图。

我考虑过使用 knockout.js 将两个元素绑定到一个 observable。目前，我已经使用jquery .html() 函数实现了该功能：只需在'select'上将edit-div innerhtml设置为src-div innerhtml，并在对edit-div进行更改后反转该过程以更新src-div。

我想知道这里是否真的需要 2 个 div，或者是否有某种方法可以在一个页面上实际查看同一元素两次，所做的任何更改都会自动反映在两个“视图”中，从而无需复制 innerhtml属性在两个元素之间来回切换。

本质上，这就像一个镜面效果，没有翻转。

到目前为止我发现的最接近的是：

http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Reflections/Reflections.html

感谢您提供执行此任务的任何推荐做法。

Answer 1

（几乎）您在页面上看到的所有内容在 DOM 中都有对应项。 DOM 中的所有内容都被准确地渲染一次（除了伪类）。并且 DOM 中的每个节点只能有一个父节点（没有排除项）。

不幸的是，您必须克隆特定节点并对两者进行更改，因为当前 CSS 文档中没有复制和翻译机制。

Answer 2

如果您使用的是 jquery，您可以使用一个 div 并“克隆”它。您可以阅读此内容以获取更多信息。 http://api.jquery.com/clone/

如果将 div 的类设置为相同的内容，则可以将更改传播到两者。然后您可以将 .addClass 应用到第二个 div 以应用“反射”效果（如果这是您的最终目标）。