可视化克隆DOM元素

Question

我的布局顶部有一个搜索框

<input type="text" id="rec_search_input" ...>

我想克隆这个元素到第二个位置，它必须看起来一样，行为相同。

现在我知道ID必须是唯一的，但是，想象一下unix符号链接，可以从不同的目录访问相同的文件。

是否可以克隆DOM元素并重用其附加的样式+事件处理程序，......？

Answer 1

一个正确的解决方案是给.cloneNode()一个新的ID，并且只将CSS应用于元素的类而不是它的ID。所以：

var clone = document.getElementById("rec_search_input").cloneNode();
clone.id = "some other id";

...然后将其附加到DOM中的其他位置（例如，通过appendChild，insertBefore等）。 （旁注：由于你的元素是input，它不能有子节点，但是如果你将它用于其他东西，你可以使用cloneNode(true)来克隆它的后代元素;然后将它们旋转到确保他们的id值是唯一的。）

在某种程度上，你可以“作弊”。浏览器或其他任何内容都不会强制执行ID唯一性，即使有多个元素，CSS也会应用于具有相同ID的元素。 Demo

但是，正如您可能知道的那样，如果您有重复的ID，getElementById之类的JavaScript函数将无法预测。