使用arttemplate js模板引擎，直接用模板渲染，减少字符串拼接。

html:

<div class="box"></div>
                     <script id="t1" type="text/html"> {{each xiaolei as index}} //循环采用each as 循环，xiaolei 为循环体，在js里面有定义 。 <dd>
                                 <div class="picture">
                                     <img src="{{index.picture}}" />
                                 </div>
                                 <div class="dishes">
                                     <p class="dish_title">{{index.name}}</p>
                                 
                                     <div class="under_dishes">
                                         <div class="under_content">
                                             <p class="sales">月售{{index.monthSale}}</p>
                                             <p class="price">￥<span>{{index.price}}</span></p>
                                         </div>
                                         <p class="add"> <i class="icon iconfont icon2">&#xe60a;</i> &nbsp;<span class="nums"> 1 </span> &nbsp; <i class="icon iconfont icon1">&#xe63c;</i> </p>
                                     </div>
                                 </div> 
                             </dd>
 {{/each}}
                     </script>

js:

//ajax请求json数据
    function rightDataRender(smallClassfy){ var html=""; var xiaolei; //var classfyArray;
 $.ajax({ //ajax请求 url:"js/orderMeal.json", type:"get", dataType:"json", async:true, data:{}, error:function(){ console.log("对不起，请求出错！"); }, success:function(data){ //如果请求成功，根据条件定义xiaolei switch(smallClassfy){ case 0:xiaolei=data.recommend; break; case 1:xiaolei=data.specialtyCoffee; break; case 2:xiaolei=data.tea; break; } console.log(xiaolei); var xiaoleit1 =template("t1",{xiaolei:xiaolei}); //模板渲染 $(".box").html(xiaoleit1); } }) }  

基本的模板渲染就是这些，如果不用template模板，则用字符串拼接是这样的：

for(var i=0;i<xiaolei.length;i++){ html+='<dd>'
                         +    '<div class="picture">'
                         +        '<img src=" '+xiaolei[i].picture+' " />'
                         +    '</div>'
                         +    '<div class="dishes">'
                         +        '<p class="dish_title">'+xiaolei[i].name+'</p>'
                             
                         +        '<div class="under_dishes">'
                         +            '<div class="under_content">'
                         +                 '<p class="sales">月售'+xiaolei[i].monthSale+'</p>'
                         +                 '<p class="price">￥<span>'+xiaolei[i].price+'</span></p>'
                         +             '</div>'
                         +             '<p class="add"> <i class="icon iconfont icon2">&#xe60a;</i> &nbsp;<span class="nums"> 1 </span> &nbsp; <i class="icon iconfont icon1" onclick="addFun()"  >&#xe63c;</i> </p>'
                         +        '</div>'
                         +    '</div>'    
                         +'</dd>'; $(".box").html(html); }

其实两者效果差不多，不过稍有不同，知识在于总结哈！

不过模板渲染要引入 template-web.js 文件，可以在官网下载。