<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(子元素)
内部插入，通常是在谁之前插入的
