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的字符串拼接方法