js 模板 

<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
        <script type="x-template" id="presentTemplate">
            <table border="1">
                <tr>
                    <th>赠品名称</th>
                    <th>赠品描述</th>
                </tr>
                <tr>
                    <td>[presentName]</td>
                    <td>[presentNote]</td>
                </tr>    
            </table>
        </script>
        <script text="text/javaScript">
            function myPresent(){
                // 替换正则表达式
                var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
                // 模板
                var template = $("#presentTemplate").html();
                // key和value
                var keyValue = {
                    presentName : "考拉",
                    presentNote : "好想成为考拉,每天18个小时在睡觉"
                }
                // 替换后html
                var newHtml = template.replace(reg,function(node, key){return keyValue[key];});
                // 把替换后的html展示在页面
                $("#presentDiv").html(newHtml);        
            }
            $(function(){            
                myPresent();
            });
        </script>
    </head>
    <body>
        <div id="presentDiv"></div>
    </body>
</html>

 备注:type="text/html"和type="x-template"的区别我不知道,但是两者均可

posted @ 2015-09-11 16:16  蒲木杉  阅读(152)  评论(0)    收藏  举报