JavaScript Stitching HTML code

Transfer from open source China Community: http://www.oschina.net/code/snippet_94055_21640
A friend who often does JSP development may encounter a situation where the list data is not a table, but a more beautiful list of styles that div or many other tags do. If you use AJAX to update list data, some friends may use "HTML code stitching" way, such as: "<a>" +json.name+ "</a>" method.
Let me give you a clue that you don't need to stitch up the HTML code and apply any complex list.

Code Description:
1. For Ajax to get data and then need to display the data list by stitching HTML code requirements/functions
2. HTML templates preferably have a parent element, because the template of the last clone is inserted behind the inside of the parent element
3. The most critical part of the code is, of course, the JS implementation. Understanding the JS part is mainly clone, each, append, replace these methods of understanding and application

Hope to be useful to everyone

[1]. [Code] HTML code example jumps to [1] [2]?

123456789101112131415161718192021222324252627

<div class="modal-body" style="height: 300px; overflow: auto">    <ul class="thumbnails" >        <!--         注意id=‘template‘         这里定义一个数据模板. id为template        然后里面需要显示值的地方用#key#的形式占位, 可以出现多次. key与json返回的对象的name保持一致.        刚开始编写模板的时候, 可以不设置 display: none; 方便查看模板样式.        测试的时候, 设置目标 display: none;        -->        <li class="span1" id=‘template‘ style=‘display: none;‘>            <a href="javascript:;" class="thumbnail">                <label for="#id#">                    <img src="${pageContext.request.contextPath }/resource/image/#logo#" alt="">                </label>            </a>            <p style="text-align: center"><input id="#id#" type="checkbox" value="#id#" style="opacity: 1;">#name#</p>        </li>        <!--        数据为空的时候显示的提醒信息. 不是必须.        需要的朋友主要是了解下javascript部分关键代码实现思路就可以了,        了解后随便怎么写都OK...        -->        <li class="span1" id=‘template_nodata‘ style=‘display: none;‘>            吖! 人呢? (没有可供选择的用户)        </li>    </ul></div>

[2]. [Code] JS implementation template copy and data fill jump to [1] [2]?

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

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;}

JavaScript Stitching HTML code