"WRONG_DOCUMENT_ERR:一个节点被用于与创建它的文档不同的文档中“抛出异常，尽管我正在导入另一个节点

WRONG_DOCUMENT_ERR 是一个常见的DOM（文档对象模型）错误，表示一个节点被用于与创建它的文档不同的文档中。这种情况通常发生在尝试将一个节点从一个文档复制到另一个文档时，而没有正确地进行跨文档操作。

基础概念

在DOM中，每个节点都与一个特定的文档相关联。当你尝试将一个节点从一个文档移动到另一个文档时，必须使用特定的方法来确保节点与新文档正确关联。

类型与应用场景

克隆节点：当你需要将一个节点及其子节点复制到另一个文档时。
导入节点：当你需要将一个节点从一个文档移动到另一个文档时。

常见原因及解决方法

原因

直接赋值：尝试直接将一个节点从一个文档赋值给另一个文档的元素。
未使用正确的方法：没有使用importNode或cloneNode方法进行跨文档操作。

解决方法

使用importNode方法将节点从一个文档导入到另一个文档：

// 假设sourceDoc是源文档，targetDoc是目标文档
let sourceNode = sourceDoc.getElementById('sourceElementId');
let importedNode = targetDoc.importNode(sourceNode, true);

// 现在可以将importedNode添加到目标文档中的某个元素
targetDoc.getElementById('targetElementId').appendChild(importedNode);

使用cloneNode方法克隆节点并添加到目标文档：

// 假设sourceNode是需要克隆的节点
let clonedNode = sourceNode.cloneNode(true);

// 现在可以将clonedNode添加到目标文档中的某个元素
targetDoc.getElementById('targetElementId').appendChild(clonedNode);

示例代码

以下是一个完整的示例，展示了如何正确地将一个节点从一个文档导入到另一个文档：

// 创建两个不同的文档
let sourceDoc = document.implementation.createHTMLDocument('Source Document');
let targetDoc = document.implementation.createHTMLDocument('Target Document');

// 在源文档中创建一个节点
let sourceElement = sourceDoc.createElement('div');
sourceElement.id = 'sourceElementId';
sourceElement.textContent = 'This is a source element';

// 将源节点导入到目标文档
let importedNode = targetDoc.importNode(sourceElement, true);

// 将导入的节点添加到目标文档中的某个元素
let targetElement = targetDoc.getElementById('targetElementId');
if (targetElement) {
    targetElement.appendChild(importedNode);
} else {
    console.error('Target element not found in the target document.');
}

通过这种方式，可以避免WRONG_DOCUMENT_ERR错误，并确保节点正确地从一个文档移动到另一个文档。