HTML Document.importNode VS Node.cloneNode (实际示例)

在本文中，我们将介绍HTML中的Document.importNode方法和Node.cloneNode方法，并通过一些实际示例来说明它们的区别和用法。

阅读更多：HTML 教程

什么是Document.importNode和Node.cloneNode

在HTML中，Document.importNode和Node.cloneNode都是用于复制节点的方法。复制节点是在DOM中经常使用的操作，它可以创建一个节点的副本，并将副本插入到指定的位置。

Document.importNode ：是Document对象的方法，用于导入一个节点到当前文档中。该方法可以将需要复制的节点从原始文档中导入到目标文档中。它可以保留导入节点的属性、子节点和事件处理程序等。
Node.cloneNode ：是Node对象的方法，用于创建一个节点的副本。该方法只复制节点本身，不会复制任何子节点和属性。需要注意的是，它只复制指定节点，而不复制该节点的子节点树。

区别与用法示例

下面通过一些实际的示例来展示Document.importNode和Node.cloneNode的区别和用法。

示例1：复制节点到另一个文档

首先，我们创建两个HTML文档：source.html和target.html。source.html中包含一个div元素，我们将使用Document.importNode和Node.cloneNode将其复制到target.html中。

<!-- source.html -->
<div id="sourceDiv">Hello, World!</div>

<!-- target.html -->
<div id="targetDiv"></div>

在JavaScript代码中，我们使用Document.importNode将sourceDiv复制到target.html的targetDiv中。

// target.html的JavaScript代码
var sourceDiv = document.getElementById('sourceDiv');
var targetDiv = document.getElementById('targetDiv');
var importedDiv = document.importNode(sourceDiv, true);
targetDiv.appendChild(importedDiv);

结果是target.html的targetDiv中显示了source.html中的div元素，包括文本内容。

示例2：复制节点的属性

在这个示例中，我们将创建一个按钮，并使用Document.importNode和Node.cloneNode来复制它的属性。

<!-- source.html -->
<button id="sourceButton" class="btn">Click me!</button>

在JavaScript代码中，我们使用Document.importNode和Node.cloneNode将按钮复制到目标元素中，并检查它们是否复制了相同的属性。

// JavaScript代码
var sourceButton = document.getElementById('sourceButton');

// 使用Document.importNode复制按钮
var importedButton1 = document.importNode(sourceButton, true);
console.log(importedButton1.id); // 输出：sourceButton
console.log(importedButton1.className); // 输出：btn

// 使用Node.cloneNode复制按钮
var clonedButton = sourceButton.cloneNode(true);
console.log(clonedButton.id); // 输出：sourceButton
console.log(clonedButton.className); // 输出：btn

结果显示，使用Document.importNode和Node.cloneNode方法复制按钮，复制的按钮都保留了相同的id和class属性。

总结

在本文中，我们介绍了HTML中的Document.importNode和Node.cloneNode方法，并通过实际示例对它们进行了比较和说明。Document.importNode方法适用于复制节点及其属性、子节点和事件处理程序等到目标文档中，而Node.cloneNode方法只复制节点本身，不复制任何子节点和属性。根据具体的需求，我们可以选择使用适合的方法来复制节点，并在DOM操作中灵活运用。