2023-07-21T13:43:01.png

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>

<div id="box" onclick="alert(1)">

    <p>段落内容 1</p>
    <p id="p2">段落内容 2</p>
    <p>段落内容 3</p>
    <p>段落内容 4</p>
</div>


    


<script>
function my$(id){
    return document.getElementById(id)
};



var box = my$("box");
var p2 = my$("p2");

//浅度克隆
//仅克隆div元素，不包含子元素
var newBox = box.cloneNode(false);

document.body.appendChild(newBox);






//深度克隆
//div内的子元素和标签内的事件也克隆，不包含js内绑定的事件
var newBox = box.cloneNode(true);

//更改id
newBox.id = "newBox";

document.body.appendChild(newBox);












</script>


</body>
</html>