js dom节点操作的增加和删除

一、增加元素节点
我们想要增加一个节点，节点不能凭空产生，我们需要先创建一个节点，创建一个元素节点的操作很简单。例如我们想要在一个 ul 的标签添加一个 li 标签。
（1）创建一个节点操作

var li=document.createElement('li');

（2）添加节点操作
添加节点有两种方式：
第一种是 node.appendChild(node)
node 代表的是父级，child 代表的是子级 ，需要注意的是，它是从后面追加元素，类似于数组中的push

var ul=document.querySelector('ul'); //得到父级
ul.appendChild(li);//添加节点

第二种是 node.insertBefore(child,指定元素位置)
代表含义同上，可以指定位置添加插入元素

var lili = document.createElement('li');  //创建节点
ul.insertBefore(lili,ul.children[0]); //添加插入节点

二、删除元素节点
删除元素要有一个点击操作，点击了才删除，不点击就不删除，添加一个button 按钮,然后获取元素

var btn=document.querySelector('button');//获取button按钮

删除元素的用法：ul.removeChild(ul.children[0])
ul 是父节点 ul.children[0]是父节点的第一个子节点
点击按钮我们依次删除 ul 下的每一个子节点

btn.onclick=function(){
            if(ul.children.length==0){
                this.disabled=true;
            }else{
            ul.removeChild(ul.children[0]);
            }
        }

在删除操作里面添加了一个判断条件，子节点都被删除了，就无法点击了。
自己随便做的总结，谢谢。