dom操作中的创建追加删除

1.创建一个元素

document.createElement("标签名")   可以创建动态元素

 <script>

        var arr = ["合肥","南京","上海","北京","杭州"]

        var lists = document.querySelector("#lists");

        for(var i=0;i<arr.length;i++){

            var oli = document.createElement("li")

            oli.innerHTML = arr[i];

            //appendChild() 方法可向节点的子节点列表的末尾添加新的子节点

            lists.appendChild(oli);

        }

        //  利用文档碎片创建元素

        var arr = ["合肥","南京","上海","北京","杭州"]

        var lists = document.querySelector("#lists");

        // 创建一个文档片段

        var fragment = document.createDocumentFragment();

        for(var i=0;i<arr.length;i++){

            var oli = document.createElement("li");

            oli.innerHTML = arr[i];

            fragment.appendChild(oli);

        }

        lists.appendChild(fragment);

    </script>

利用文档对象创建元素

1、我们要明白当js操作dom时发生了什么？   

       每次对dom的操作都会触发"重排"（重新渲染界面，发生重绘或回流），这严重影响到能耗，一般通常采取的做法是尽可能的减少 dom操作来减少"重排"        

2、什么是文档碎片？    document.createDocumentFragment()    一个容器，用于暂时存放创建的dom元素      

3、文档碎片有什么用？    将需要添加的大量元素  先添加到文档碎片中，再将文档碎片添加到需要插入的位置，大大 减少dom操作，提高性能（IE和火狐比较明显）

2.元素的替换

父元素.replaceChild(新,旧)      如果操作的是页面已经存在的执行的是剪切操作

3.拼接字符串

 var str ="";

        for(var i = 0;i<arr.length;i++){

            str += "<li>" + arr[i] + "</li>";

        }

        lists.innerHTML= str; 

4.创建元素的插入操作

（1）：父元素.appendChild(子元素)

在内部的末尾进行追加，通常作为最后一个子元素

（2）：父元素.instrBefor(子元素)

内部插入，通常是在谁之前插入的