JavaScript: cloneNode与importNode的区别

Question

我注意到在一些代码样本中，有两种看似不同的方式来克隆DOM节点并将其附加到现有元素上：

element.appendChild(something.cloneNode(true));
element.appendChild(document.importNode(something, true));

这两种方法都有复制一个节点的效果。第二个版本看起来更冗长，并暗示着复制实际上首先在某个具体位置，尽管它仍然需要找到一个合适的位置。然而，MDN和其他一些网站将其用作使用template标记的示例。其他地方则采用更简单的cloneNode选项。

问题是：相比cloneNode，使用importNode有何优势？

- Manngo

---

https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode#Notes 链接到 https://www.w3.org/DOM/faq.html#ownerdoc。当你从不同的 DOM 复制一个元素时，应该使用 importNode，以避免不同的 DOM 行为问题。 - Kaiido

@Kaiido 这与 cloneNode 有何不同？ - Manngo

仅根据我对之前链接的理解，使用 importNode，新文档将使克隆节点成为自己的一部分（共享其 DOM 方法和可能的命名空间等），而使用 externalDocument.cloneNode()，克隆节点仍将具有 externalDocument 的 API。 - Kaiido

在DOM3及之前的版本中，importNode用于从其他文档复制节点，而cloneNode用于在同一文档中进行复制。但是浏览器并不强制执行这一规则，因此在最新的DOM标准中，可以使用cloneNode从不同的文档中进行复制。在其他上下文中使用DOM时，请遵循DOM3的规则。 - Alohci

如果我理解正确的话，原本的想法是两者都会从同一文档克隆节点，但importNode还可以从不同的文档克隆。然而，现在我可以选择任何一个？你能把它转化成一个答案，这样我就可以接受它了吗？ - Manngo

Answer 1

在DOM3及之前的版本中，importNode用于从其他文档复制节点，cloneNode用于在同一文档内复制。但是浏览器不强制执行这一规定，因此在最新的DOM标准中，cloneNode可用于从不同的文档复制。在其他情况下使用DOM时，请遵循DOM3的规则。

- Alohci