使用javascript在两个地方绘制单个DOM元素

Question

我正在使用 jQueryUI 创建一个大的可排序卡片表，每个卡片都由一个嵌套的 div 标签树组成，并使用 CSS 进行样式设置。当我在某些条件下拖动卡片时，我想创建一个稍微透明的卡片“克隆”，在拖动时悬停在“真实”卡片的右侧，但我不想实际复制所有 HTML为了完成这种视觉效果。

那么，是否可以使用 javascript 在网页上的两个不同位置绘制相同的 DOM 元素，而无需实际复制 HTML？

感谢任何回答的人。

Answer 1

每个 DOM 元素要么根本不连接到 DOM，要么连接到一个特定的父级。您不能在两个不同的地方显示相同的元素。附加到新父级只会从旧父级移动元素。

您可以使用cloneNode（注意附加新的事件处理程序，因为它们不是克隆的）或在 JS 工厂生成一些“模板”元素并将每个元素附加到不同的父级。