js填充列表的几种方式

应用情景：在服务端返回一个json格式的列表数据，前端页面中需要使用js来绘制dom的时候

 

1，根据html模板按规则替换掉数据部分的实现方式

html模板

<!-- 模板 -->
<div style="display: none;">
<ul id="itemdataTempleteContent">
<li onclick="getPlan({itemdata_id});">
<span>名字：{itemdata_name}</span>
</li>
</ul>
</div>

 

js方法

//根据模板生成内容，在内容较多时使用字符串替换拼接操作来添加dom
    //模板中使用“{itemdata_XXX}”的格式来作为属性替换值的标示，遇到该标示则替换
    //@param templete 模板内容
    //@param data 数据行
    //@param format 格式化（如日期格式化），可以没有
    function getHtmlByTemplete(templete, data, format){
        return templete.replace(/{itemdata_([^}]+)}/g, function($0, $1){
            var v = data[$1] ; 
            if( typeof(format) !== 'undefined' && format !== null ){
                v = format($1, v) ; 
            }
            return v ; 
        }) ; 
    }

 

填充代码片段

var templeteStr = XXX.innerHTML ; 
    var content = XXXXX; 
    var itemHtmlList = [] ; 
    for(var i=0 ; i < list.length; i++){
        itemHtmlList.push(getHtmlByTemplete(templeteStr, list[i], itemdataFormatDate)) ; 
    }
    content.innerHTML = itemHtmlList.join('') ; 

 

 

 

2，利用jquery的clone方法去根据模板生成dom，然后加入

    数据大的时候不应该使用

 

3，利用js的字符串拼接方法