js克隆,插入,删除

199 阅读1分钟
  /*有两个按钮 删除 和 添加 按钮  点击添加 出现
     一个h1标签到两个按钮的上面 h1 里面的内容是 我是h1 
     点击删除 可以把第一个h1元素删除 
    点击h1元素 可以复制本身和子节点 再添加到 h1元素的上面 */
      <button onclick="fn()">添加</button>
    <button onclick="rm()">删除</button>
<script>
  function fn() {
            let button = document.querySelector("button");
            let h1 = document.createElement("h1");
            let hh1 = document.createTextNode("我是h1");
            button.appendChild(hh1);
            let body = document.querySelector("body");
            body.insertBefore(h1, button);

        }
        function rm() {
            let body = document.querySelector("body");
            let h1 = document.getElementsByTagName("h1")[0];
            body.removeChild(h1);
        }
    <script/>
 let a=document.createElement('元素名') 创建元素节点
 let b=document.createTextNode('文本')创建文本节点
 a.appendChild(b)//在a节点插入b节点
insertBefore插在节点之前
removeChild删除
用 父元素 + .removeChild(括号里写删除的节点名)的语法格式方法来删除
cloneNode(deep)复制某个指定的节点 
let divClone = div1.cloneNode(true);
cloneNode()里面写true才表示克隆盒子的自身节点又包括和盒子的子节点(内容)