JS DOM标签元素复制和替换

OGoodness

于 2022-04-17 21:29:05 发布

阅读量3.1k

点赞数 1

分类专栏： JS 文章标签： JSDOM 标签复制 CloneNode replaceChild DOM操作

本文链接：https://blog.youkuaiyun.com/qq_46275230/article/details/124236837

版权

JS 专栏收录该内容

29 篇文章

订阅专栏

JS DOM标签元素复制和替换

文章目录

JS DOM标签元素复制和替换
- 元素的复制 :A.CloneNode(B)
- 元素的替换 :A.replaceChild(B,C)

元素的复制 :A.CloneNode(B)

A表示需要被复制的元素对象
B表示参数,当传入true表示连带子节点一并复制,false表示复制节点本身,不包括子节点

<body>
  <div class="wrap">
    <p>小情歌</p>
  </div>
  
  <script>
    let oWrap = document.querySelector(".wrap")

    let oCopy = oWrap.cloneNode(true)
    oWrap.appendChild(oCopy)
  </script>
</body>

请添加图片描述

元素的替换 :A.replaceChild(B,C)

在元素A中,将B元素替换掉C元素

<body>
  <div class="wrap">
    <p class="b">小情歌</p>
    <p class="c">Hello World</p>
  </div>

  <script>
    let oWrap = document.querySelector(".wrap")
    let oB = document.querySelector(".b")
    let oC = document.querySelector(".c")

    oWrap.replaceChild(oB,oC)
  </script>
</body>