Javascript：克隆一个DOM节点

听海边涛声

已于 2024-06-25 20:24:44 修改

阅读量194

点赞数 10

文章标签： javascript 前端开发语言

于 2024-06-25 20:23:09 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/139968262

版权

克隆介绍

克隆出一个跟原标签一样的元素：

元素.cloneNode(布尔值)

传入参数的布尔值，默认值为false：

若为true，称为深克隆，表示克隆时会包含后代节点一起克隆
若为false，称为浅克隆，表示克隆时不包含后代节点

示例

示例：深克隆

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    // 1. 克隆节点
    const li1 = ul.children[0].cloneNode(true)
    // console.log(li1)
    // 2. 追加
    ul.appendChild(li1)
  </script>
</body>

</html>

在这里插入图片描述

示例：浅克隆

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    // 1. 克隆节点
    const li1 = ul.children[0].cloneNode()
    // console.log(li1)
    // 2. 追加
    ul.appendChild(li1)
  </script>
</body>

</html>