javascript拼接html代码

经常做jsp开发的朋友可能遇到一个情况，显示列表数据不是table，而是div或者其他很多标签做的一种更漂亮的样式列表。如果采用ajax更新列表数据，可能有些朋友采用“html代码拼接”的方式，比如：""+json.name+""这样的方法。
下面我提供一个思路，可以不需要拼接html代码，并且适用任何复杂的列表。

代码说明：
1. 适用于ajax获取数据然后需要通过拼接html代码的方式实现数据列表展现的需求/功能
2. html模板最好有一个父元素, 因为最后clone的模板都是插入在父元素内部后面
3. 代码中最关键的部分当然是js的实现. 理解js部分主要是clone、each、append、replace这几个方法的理解和应用

// 希望对大家有用
1. [代码]html代码示例     

   

       
       
• 
             
                 
                     
                 
             
             

  #name#

  
         

       
       
• 
              吖! 人呢? (没有可供选择的用户)
         

   

2. [代码]js实现模板复制和数据填充 
function demo() {
    $.post('${pageContext.request.contextPath}/demo/getData.htm', function(data) {
        if(data.list.length > 0) {
            var hasHandler = typeof(valHandler) == 'function'; // 是否有定义val额外处理的函数
            var template = $('#template');
             
            // 循环json格式对象
            $.each(data.list, function(i, obj) {
                // 克隆当前数据模板, 清除id, 设置显示
                // jQuery也有removeAttr()方法可以清除id, 看个人习惯
                // 之所以清除id, 是为了保持id的唯一性, 并且模板id不能重复
                // clone(true)是把事件一起clone
                var temp = template.clone(true).attr('id', '').show();
                var html = temp.html(), regx;       // 取模板里的html字符串; 定义正则变量
               
                // obj为json中的对象;    key对应json对象的属性, val就是json的val值
                $.each(obj, function(key, val) {
                    if(hasHandler) {
                        // 对'指定属性'的value进行特殊处理, 如value为空需指定默认值
                        val = valHandler(key, val);
                    }
                     
                    // 动态创建正则
                    // 例如：#name#/g 替换所有 #name#
                    regx = new RegExp('#'+key+'#', 'g');
                    html = html.replace(regx, val || '');   // 将占位符替换成实际值, 如果 val为null, 将原有的#name#占位符替换成''
                });
                 
                // temp.html(html)是把html字符有替换回去
                // 然后追加到目标的父容器的后面
                template.parent().append(temp.html(html));
            }); // $.each
        }
        else {
            $('#template_nodata').show();
        }
    }); // ajax获取数据
}
 
// valHandler必须定义, 
// 如果不定义, 上述代码var hasHandler = typeof(valHandler) == 'function';部分会报错为定义对象
// 该函数的意义是针对需要二次处理的字段进行处理
function valHandler(key, val) {
    if(key == 'logo' && !val) {
        // 如果logo为空, 路径改成默认logo路径
        val = 'defaultLogo.png';
    }
    return val;
}