元素的增删改查

     文档树中的节点，是可以用js进行增删改查的

      获取(各种获取元素节点的方法)

var div = document.querySelector("div");

      创建元素：光创建是不会渲染到页面中的 不在DOM中

      var box = document.createElement("div"); //传入标签名 是字符串

      box.className = "box"; //给box添加属性 这里添加了类名class="box" 可以添加两个 空格隔开

      box.classList.add("box1"); //和classname差不多 但是这个可以加多个类名

      box.classList.add("box2"); //到这里box已经有三个类名

      box.classList.remove("box2"); //将box2类名删除

      将创建的元素添加到文档树中

   div.appendChild(box); //将box中的元素添加到div中 box就是x的子元素
   box.innerHTML = "666"; //需要注意的是 innerHTML会将box内的内容全部覆盖 包括box的子级元素

      解决方法1：

       创建一个新元素 把666通过innerHTML放在新元素中 再把新元素添加到box

      解决方法2：

      box.innerHTML += "<h1>666</h1>";

   

   var btn = document.querySelector("button");

      btn.onclick = function () {

        //删除元素

        //父元素删除子元素

        // box.parentElement.removeChild(box); //找到box的父元素 然后将要删除的子元素传进去

        //自己移除

        // box.remove(); //移除box

        //清空自己

        // box.parentElement.innerHTML = ""; //将box的父元素清空

        //克隆

        // var box2 = div.cloneNode(true); //不加true只克隆标签 加true会克隆所有的后代元素和事件

        // div.appendChild(box2);//克隆一个新的标签 必须手动加到页面中才会显示出来

        div.appendChild(btn); //将btn的位置改变了 不在复制 只是移动

      };