复制（克隆）节点node . cloneNode ( )深拷贝浅拷贝

最新推荐文章于 2024-02-02 09:30:00 发布

不秃头的小李同学

最新推荐文章于 2024-02-02 09:30:00 发布

阅读量5.2k

点赞数 2

分类专栏： DOM JavaScript

本文链接：https://blog.csdn.net/qq_41767945/article/details/108329118

版权

JavaScript 同时被 2 个专栏收录

46 篇文章 3 订阅

订阅专栏

DOM

14 篇文章 0 订阅

订阅专栏

node.cloneNode ()方法返回调用该方法的节点的-一个副本。也称为克隆节点/拷贝节点

如果括号参数为空或者为false,则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。

①浅拷贝

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>clonetest</title>
</head>
<body>
	<ul>
		<li>123</li>
		<li>123</li>
		<li>123</li>
	</ul>
</body>
<script>
	var ul = document.querySelector("ul");
	ul.appendChild(ul.children[0].cloneNode());
</script>
</html>

在这里插入图片描述
②深拷贝

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>clonetest</title>
</head>
<body>
	<ul>
		<li>123</li>
		<li>123</li>
		<li>123</li>
	</ul>
</body>
<script>
	var ul = document.querySelector("ul");
	ul.appendChild(ul.children[0].cloneNode(true));
</script>
</html>

在这里插入图片描述

不秃头的小李同学

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
复制（克隆）节点node . cloneNode ( )深拷贝浅拷贝

node.cloneNode ()方法返回调用该方法的节点的-一个副本。也称为克隆节点/拷贝节点如果括号参数为空或者为false,则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。①浅拷贝<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>clonetest</t
复制链接

扫一扫