节点的操作

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

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

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

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

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

div1.appendChild(divText)

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

let gege = document.createElement('button');
            let btnText = document.createTextNode('btn的哥哥');
            gege.appendChild(btnText)

克隆和删除节点

父元素.removeChild(要被删除的元素)

  let body = document.getElementsByTagName('body')[0];
            let div1 = document.getElementsByClassName('div-class')[0];
            /* 父元素.removeChild(要被删除的元素) */
            body.removeChild(div1)

cloneNode

  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)