使用javascript在两个地方绘制单个DOM元素 [英] Use javascript to draw a single DOM element in two places

问题描述

我使用jQueryUI来创建一张可排序卡片的大表格，每张卡片由嵌套div标签的大树构成，并使用CSS进行造型。当我在某些条件下拖动一张卡片时，我想创建一个稍微透明的卡片克隆，它在拖动时悬停在真实卡片的右侧，但我不想实际上复制所有的HTML为了达到这种视觉效果。

那么，是否有可能使用javascript在两个不同的地方在网页上绘制相同的DOM元素，而没有真正复制HTML？

感谢任何回答。每个DOM元素都是根本没有连接到DOM或连接到一个特定的父级。你不能在两个不同的地方显示相同的元素。附加到一个新的父母只会从旧的元素移动元素。

您可以使用 cloneNode （注意附加新的事件处理程序，因为它们没有被克隆）工厂生产一些模板元素，并将它们分别附加到不同的父母身上。

I'm using jQueryUI to create a large table of sortable cards, each of which is composed of a large tree of nested div tags with styling using CSS. When I drag a card under certain conditions, I want to create a slightly transparent "clone" of the card that hovers just to the right of the "real" card while dragging, but I don't want to actually duplicate all of the HTML in order to accomplish this visual effect.

So, is it possible to use javascript to draw the same DOM element on a webpage in two different places without actually duplicating the HTML?

Thanks to anyone who answers.

解决方案

Each DOM element is either not connected to DOM at all or connected to one specific parent. You cannot display same element in two different places. Attaching to a new parent will just move element from old one.

You can either use cloneNode (take care to attach new event handlers to it, as they are not cloned) or make at JS factory that produces some "template" elements and attach each of them to different parents.

这篇关于使用javascript在两个地方绘制单个DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！