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