Node.cloneNode

Node.cloneNode:對Node節(jié)點進行克隆,分為深克隆和淺克隆。

示例代碼
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100%;
            height: 300px;
            border: 2px solid pink;
            display: flex;
        }

        .part1,
        .part2 {
            flex: 1;
            border: 1px solid green;
            margin: 10px;
            text-align: center;
            line-height: 300px;
            font-size: 40px;
            color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box" id="box">
        <div class="part1">
            part1
        </div>
        <div class="part2">
            part2
        </div>
    </div>
    <script>
        const el = document.getElementById('box')
        const clone_deep = el.cloneNode(true)
        const clone_shallow = el.cloneNode(false)
        console.log('深克隆:', clone_deep, '淺克隆:', clone_shallow)
    </script>
</body>

</html>
截圖
image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 代碼下載[https://github.com/jiuchabaikaishui/WebJS] API(Appli...
    酒茶白開水閱讀 149評論 0 0
  • 在框架盛行的年代,還有多少人記得在沒有框架時我們?nèi)绾慰刂?dom 的行為呢?作者本人也一直忽視了這方面的學習,直到...
    VioletJack閱讀 974評論 1 2
  • 此筆記是我在拉勾學習課程過程中的總結(jié),文字原創(chuàng),筆記里很多技巧和知識是老師總結(jié)的,如果有侵權(quán),請聯(lián)系本人! 一些基...
    你好肥貓閱讀 724評論 0 0
  • 新增節(jié)點 新增同級節(jié)點 node.before()、node.after() node.before()node....
    記錄經(jīng)歷閱讀 620評論 0 0
  • 一、節(jié)點引入 1.1 文檔對象模型 DOM(Document Object Model——文檔對象模型)是用來呈現(xiàn)...
    Threejs開發(fā)者閱讀 334評論 0 2

友情鏈接更多精彩內(nèi)容