var newDiv = red.cloneNode();
document.body.appendChild(newDiv);
注意：
1、默认只克隆元素本身；设置参数为true，进行深度克隆，可以克隆元素的子元素等所有元素
2、元素绑定的事件并不会随着元素的克隆而被携带
===========================相关示例代码如下================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM节点克隆</title>
<style>
*{
margin: 0;
padding: 0;
}
.red{
width: 200px;
height: 200px;
background: pink;
border-radius: 50%;
margin-top: 20px;
margin-left: 20px;
}
.green{
width: 100px;
height: 100px;
background: green;
border-radius: 50%;
margin:0 auto;
}
#clon1,#clon2{
margin-left: 50px;
margin-top: 30px;
width: 120px;
height: 30px;
}
</style>
</head>
<body>
<div class="red">
<div class="green"></div>
</div>
<button id="clon1">克隆节点本身</button>
<button id="clon2">克隆全部</button>
<script>
var red = document.querySelector('.red');
var clon1 = document.getElementById('clon1');
var clon2 = document.getElementById('clon2');
//注意：克隆的元素没有携带原有元素绑定的事件
red.onclick = function(){
this.style.background = 'black';
}
//单击按钮，克隆节点
clon1.onclick = function(){
//克隆节点,并追加到body中
var newDiv1 = red.cloneNode(); //这样只能克隆元素本身；添加参数true,可以全部克隆
document.body.appendChild(newDiv1);
}
//深度克隆
clon2.onclick = function(){
var newDiv2 = red.cloneNode(true);
document.body.appendChild(newDiv2);
}
</script>
</body>
</html>
1631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
