JS：克隆元素
<style>#mydiv {
width: 200px;
height: 200px;
background: teal;
cursor: pointer;
display: inline-block;
}
</style>
<div id="mydiv" title="单击克隆本元素">
<img alt="" src="https://638183.freep.cn/638183/t22/gif/goldfish.gif" />
</div>
<p><input type="checkbox" id="Deep" /><label for="Deep">深度克隆</label></p>
<div id="clonebox"></div>
<script>
mydiv.onclick = () => cloneEle(Deep.checked);
let cloneEle = (deep) => {
let node = document.querySelector('#mydiv');
let clone = node.cloneNode(deep);
clonebox.appendChild(clone);
}
</script>
一楼代码：
<style>
#mydiv {
width: 200px;
height: 200px;
background: teal;
cursor: pointer;
display: inline-block;
}
</style>
<div id="mydiv" title="单击克隆本元素">
<img alt="" src="https://638183.freep.cn/638183/t22/gif/goldfish.gif" />
</div>
<p><input type="checkbox" id="Deep" /><label for="Deep">深度克隆</label></p>
<div id="clonebox"></div>
<script>
mydiv.onclick = () => cloneEle(Deep.checked);
let cloneEle = (deep) => {
let node = document.querySelector('#mydiv');
let clone = node.cloneNode(deep);
clonebox.appendChild(clone);
}
</script>
本帖最后由 马黑黑 于 2023-8-9 12:53 编辑
JS提供一个基于元素的克隆方法，cloneNode(deep)，需要一个布尔值的deep 参数，deep 是深的意思，deep 为真（true），则克隆元素及其所有子元素和子节点（如文本），为假，则仅克隆克隆对象。
克隆对象为元素对象，一般可以使用 document.getElementById 或 document.querySelector 等方法获取，例如：
let node = document.getElementById('#mydiv');
然后，变量 node 就可以将自己用 cloneNode 方法克隆自己，并赋值给一个节点变量：
let clone = node.cloneNode(true);
最后，要有另一个元素接收被克隆的 clone 节点变量，用 appendChild 方法追加都自己的子元素中。例如，假设我们有一个 id="cloneBox" 的div：
cloneBox.appendChild(clone);
需要额外说明的是：cloneNode 方法能将元素基于CSS的属性全部克隆，若 deep 参数为 true，子元素及其一切基于CSS的属性也一并克隆；但，cloneNode 方法不能克隆基于JS的事件。
若直接克隆，就是底色，选深度克隆，就是原图。真神奇{:4_204:} 感谢黑黑又带来新知识{:4_187:} 这图好看啊 醉美水芙蓉 发表于 2023-8-9 11:27
好神奇！
JS有很多能耐 红影 发表于 2023-8-9 09:19
若直接克隆，就是底色，选深度克隆，就是原图。真神奇
浅克隆不克隆克隆对象的子元素 一斛珠 发表于 2023-8-9 11:21
这图好看啊
还行 红影 发表于 2023-8-9 09:20
感谢黑黑又带来新知识
JS的知识点很多很多 马黑黑 发表于 2023-8-9 12:09
浅克隆不克隆克隆对象的子元素
哦，就是指克隆它本身吧。 马黑黑 发表于 2023-8-9 12:10
JS的知识点很多很多
这个是它本身的命令吧。 红影 发表于 2023-8-9 12:56
这个是它本身的命令吧。
所谓知识点，指的就是JS内置的东东，不一定是命令，可以是属性、方法、函数 红影 发表于 2023-8-9 12:55
哦，就是指克隆它本身吧。
记住这么个意思就好：浅克隆指克隆元素自身，不包括其下的子元素和节点，深克隆克隆一切（但不包含JS方面的东东） 马黑黑 发表于 2023-8-9 19:03
所谓知识点，指的就是JS内置的东东，不一定是命令，可以是属性、方法、函数
看样子这些东西需要记住呢。 马黑黑 发表于 2023-8-9 19:05
记住这么个意思就好：浅克隆指克隆元素自身，不包括其下的子元素和节点，深克隆克隆一切（但不包含JS方面 ...
也就是身克隆除了js，其他的都照搬呗。 这个好玩，
墨绿色背景点一下就出来了。。。。
深度克隆是小鱼，
神奇的是可以在一楼排好多张。。{:4_173:} 这个克隆代码对我们有啥用？ 亚伦影音工作室 发表于 2023-8-9 21:53
这个克隆代码对我们有啥用？
会有用的