HTML | DOM importNode() 方法(1)

📌 相关文章

📜 HTML | DOM importNode() 方法(1)

📅 最后修改于: 2023-12-03 14:41:47.867000 🧑 作者: Mango

HTML | DOM importNode() 方法

importNode() 方法是 DOM 元素节点的一个方法，它用于将一个节点从另一个文档复制到当前文档。这个方法会带着节点以及它的所有后代节点以及属性全部复制过来。

语法

importedNode = document.importNode(externalNode, deep);

参数

externalNode：需要复制到当前文档的节点。
deep：可选参数，表示是否复制节点的后代节点。

实例

下面是一个例子，它演示了如何用 importNode() 方法将一个节点从 newDocument 复制到 currentDocument。

<!DOCTYPE html>
<html>
<head>
	<title>Demo</title>
</head>
<body>
	<h2>复制节点实例</h2>

	<div id="source">
		<h3>这是一个外部文档</h3>
		<p>我们将把这个节点复制到当前文档</p>
	</div>

	<div id="target"></div>

	<script>
		var source = document.getElementById('source');
		var target = document.getElementById('target');

		// 复制节点
		var copiedNode = document.importNode(source, true);
		target.appendChild(copiedNode);
	</script>
</body>
</html>

在这个例子中，我们定义了两个 div，它们的 ID 分别为 source 和 target。source 里面包含了一个 h3 和一个 p，我们将把这个节点复制到 target 节点中。在 script 标签中，我们创建了一个 copiedNode 变量，利用 importNode() 方法将 source 中的节点及它的所有后代节点都复制到了当前文档中。最后，我们将复制的节点添加到 target 中。

总结

importNode() 方法可以非常方便地将一个节点从外部文档复制到当前文档中，同时还可以控制是否复制所有后代节点，非常灵活。使用它时，我们需要知道需要复制的节点是哪个，然后调用 document.importNode() 方法，将它复制到想要的位置中即可。