处理ajax数据；数据渲染

当我们用ajax把数据拿到前台，该如何渲染到页面，有以下几种方式：

一：使用字符串拼接的方法

声明一个空变量，然后拼接

var  st="";
st+="<div>"
    st+="这是一段字符串"
st+="</div>"
document.body.innerHTML+=st;

二：DOM创建

在js中使用creatElement的方法，添加到外层元素

 <script>
     var div=document.creatElement("div");
     document.body.appendChid(div)
 </script>

三：underscore的模板(_.template)

模板三部曲

第一步：获取模板的内容

第二步：将数据传到模板里

第三步：添加的指定的位置

 <script src="underscore.js"></script>
 <script type=text/template id="temp">
     <div>
         <span>
              <% = data.text%>
         </span>
     </div>
 <script>
 <script>
     var  txt={"text":"hello"}
     var temp=document.getelementById("temp").innerHTML;
     var html=_.template(temp)
     var exam=html({data:text})
     document.dody.innerHTMl=exam;
 </script>                        

四：文档碎片

这两种方式将字符串拼接和DOM创建的优缺点结合，原先元素的事件也存在，还减少了DOM回流  

字符串拼接的方法会将元素身上添加的事件都清除，因为字符串拼接会使DOM元素变成字符串，而字符串没有事件， 但是这种方式的优点是DOM回流相对DOM创建较少，

而DOM创建是每创建一次DOM元素就会DOM回流，严重影响了浏览器的性能，但是元素不会受影响，添加的事件也还存在

 var farg=document.creatDocumentFragment();
 var  div=document.creatElement("div")
 div.innerHTML="这是一串字符串"
 frag.appendChild(div)
 document.appendChild(frag)

PS：

事件委托：当某些元素的子集绑定了大量的相同的事件的时候，我们可以使用事件委托的方法，将事件都绑定到父级身上，找到事件源，绑定方法；