处理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：

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