javascript - 可视化克隆 DOM 元素

Question

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

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

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

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

是否可以克隆 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 函数将无法按预期工作。