动态添加删除和克隆节点

document.createElement("元素名") 创建元素节点

        let div1 = document.createElement('div');
        
        console.log(div1);
        

document.createTextNode("文本") 创建文本节点

        let divText = document.createTextNode('我是div');
         console.log(divText);
         

A.appendChild( B) 把B节点追加至A节点的末尾

        div1.appendChild(divText)
         console.log(div1);
        let body = document.querySelector('body');
        body.appendChild(div1)

父节点.insertBefore( A,B ) 把A节点插入到B节点之前

        let gege = document.createElement('button');
        let btnText = document.createTextNode('btn的哥哥');
        gege.appendChild(btnText)
        
        let didi = document.getElementById('btn1');
        body.insertBefore(gege,didi)
        

创建一个h1 我是h1 插入到 btn的前面

      function rm(){
        let body = document.getElementsByTagName('body')[0];
        let div1 = document.getElementsByClassName('div-class')[0];
        /* 父元素.removeChild(要被删除的元素) */
        body.removeChild(div1)
    }
    function cloneNd(){
        let body = document.getElementsByTagName('body')[0];
         let div1 = document.createElement('div')
         let text = document.createTextNode('我是div1')
         div1.appendChild(text);
         body.appendChild(div1);
         

cloneNode(deep) 复制某个指定的节点

        let div1 = document.getElementsByClassName('div-class')[0];
        console.log(div1);
        

获取自己的元素 再插入到body中是可以的, 但是插入的时候发现 都一个元素节点

两种插入的实现方式 第一种创建新的节点去插入 第二种 clone出一个新的节点去插入

cloneNode如果里面不传true 表示传入自身节点（不包括子节点） 传true 表示 既克隆自身节点 也克隆了自身的子节点

        let divClone = div1.cloneNode(true);
         console.log(divClone);
        let text1 = document.createTextNode('=')
        divClone.appendChild(text1)
        body.insertBefore(divClone,div1)
         body.appendChild(divClone);
    }
     写一个h1 标签 内容是我是h1 点击h1 可以克隆自己 
    可以把克隆出来的 文本内容 再加个 字符串 "=" 放在原来的h1的前面