克隆节点就是将页面中已有的一个标签复制一份到内存中，然后我们可以通过appendChild方法将克隆出来的标签添加到页面中的任意位置。
请看以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<span id="span1">这是span1</span>
<span id="span2"></span>
<span id="span3"></span>
</div>
</body>
<script>
var box = document.getElementById('box');//获取box节点
var span1 = document.getElementById('span1');//获取被克隆的节点
var span1_f=span1.cloneNode(true);//克隆时，如果传参true，表示连同节点内容一起克隆
var span1_n=span1.cloneNode();//克隆时，如果不传参，表示只克隆标签
box.appendChild(span1_f);//执行添加命令
box.appendChild(span1_n);//执行添加命令
</script>
</html>
执行结果如下：
以上，我们通过cloneNode命令和appendChild命令将id为span1的span标签克隆后放到后id为box的div标签中，在以上代码中都做了详细注解，大家动手测试一下。
|
窥视卡
雷达卡
发表于 2023-1-25 12:58:44
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-17 17:12:26
