# DOM操作之克隆节点

作者: 多叉树；转载须注明出处

Untitled

使用 cloneNode() 方法可以克隆节点; 克隆节点就是在拷贝原有的节点

克隆后的节点仍然需要主动挂载到dom节点树上

cloneNode接受一个布尔值的参数，如果为true表示深度克隆，包含该节点以及该节点的所有后代节点都会被克隆，如果为false，则只克隆节点自身；参数默认不传为false

//只克隆节点本身
var newNode = oldNode.cloneNode();
var newNode = oldNode.cloneNode();

//深度克隆
var newNode = oldNode.cloneNode(true);

深度克隆示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>深度克隆示例</title>

    <style>
    * {
        margin: 0;
        padding: 0;
    }
    div {
         width: 200px;
         height: 200px;
         background-color: red;

       }
       #newParentNode {
        background-color: green;
       }
    </style>
</head>
<body>
    <div>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
    </div>

    <div id="newParentNode">
        
    </div>

    <script>

        var oldeNode = document.getElementsByTagName('div')[0];
        
        var newParentNode = document.getElementById('newParentNode');

        var cloneNode = oldeNode.cloneNode(true);

        newParentNode.appendChild(cloneNode);

    </script>
</body>
</html>

Untitled

只克隆自身

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>深度克隆示例</title>

    <style>
    * {
        margin: 0;
        padding: 0;
    }
    div {
        margin: auto;
        margin-top: 10px;
        width: 200px;
        height: 200px;
        background-color: red;

    }
    #newParentNode {
        background-color: green;
    }
    </style>
</head>
<body>
    <div>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
    </div>

    <div id="newParentNode">
        
    </div>

    <script>

        var oldeNode = document.getElementsByTagName('div')[0];
        
        var newParentNode = document.getElementById('newParentNode');

        var cloneNode = oldeNode.cloneNode();

        newParentNode.appendChild(cloneNode);

    </script>
</body>
</html>

Untitled

← DOM操作之删除节点 DOM操作之事件监听 →