数据绑定方法：
1、利用动态元素节点和把它追加到页面中的方式实现数据绑定：
eg (ary为JSON数据）：
for(var i=0;i<ary.length;i++){
var cur=ary[i];
var oLi=document.createElement("li");
oLi.innerHTML="<span>"+(序号)+"</span>"+cur.tittle;
oUl.appendChild(oLi);
}
优势：把需要动态绑定的内容一个个的追加到页面当中，对原来的元素没有任何的影响
弊端：浏览器每当创建一个li，就添加到页面当中，引发一次DOM回流。引发回流次数过多，影响性能。
2、字符串拼接方式 (最常用绑定数据方式）：
首先循环需要绑定的数据，然后把需要动态绑定的标签以字符串的方式拼接到一起，拼接完成后，最后统一添加到页面中。eg：
var str="";
for(var i=0;i<ary.length;i++){
var cur=ary[i];
str+= "<li>";
str+= "<span>"+(序号)+"</span>";
str+= cur.tittle;
str+= "</li>";
}
oUl.innerHTML+=str;
优势：
事先把内容拼接好，最后统一添加到页面中，只引发一次回流
弊端：把新拼接的字符串添加到#ul1中，原有的li中鼠标绑定（滑动效果）都消失了。即原来标签绑定的事件都消失了。
3、文档碎片：
只引发一次回流，还对原有不产生影响。
var frg=document.createDocumentFragment(); //---->创建一个文档碎片，相当于临时创建了一个容器
for(var i=0;i<ary.length;i++){
var cur=ary[i];
var oLi=document.createElement("li");
oLi.innerHTML="<span>"+(序号)+"</span>"+cur.tittle;
frg.appendChild(oLi);
}
oUl.appendChild(frg);
frg=null; //手动释放堆内存
JS中DOM深入知识：
1、回流（重排 reflow）：
当页面中的HTML结构发生改变（增加、删除元素、位置发生改变.....），浏览器都需要重新的计算一遍最新的DOM结构，重新的对当前的页面进行渲染
2、重绘：
某一个元素的部分样式发生改变了（背景颜色等），浏览器只需要重新的渲染当前元素即可。
