如何通过模板动态生成HTML代码？

看过我写的（1）版本的可能都很清楚，如何通过text/html类型的script标签动态生成html代码。

那么今天我就和大家说说另一种更加牛掰的方式，那就是通过text/templete的script标签来动态生成代码。

需求还是和（1）一样，就是实现动态生成问卷调查，那么我们先看一下代码是怎样的？

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>模板页的使用</title>
        <script src="../js/jquery-2.0.3.min.js"></script>
        <script src="../js/mui.min.js"></script>
        <link href="../css/mui.min.css" rel="stylesheet" />
        <script type="text/javascript" charset="UTF-8">
            mui.init();
        </script>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">单选试题</h1>
        </header>
        <div class="mui-content">
            <!--此处是用来动态追加对应的提干内容-->

        </div>
        <div style="text-align: center;margin-top:10px;">
            <button class="mui-btn mui-btn-blue" id="generate" style="width:80%">通过模板生成题目</button>
        </div>
    </body>

</html>
<script src="../js/jquery-2.0.3.min.js"></script>
<script src="../js/arttmpl.js"></script>

<!--题干模板-->
<script type="text/templete" id="radio-tigan">
    <!--使用循环来控制创建的题目个数-->
    <% for(var i in record){ var item=record[i]; %>
        <div class="question">
            <h5 class="mui-content-padded" id="tigan<%=(i+1)%>"><%=item.title%></h5>
            <div class="mui-input-group" id="option<%=(i+1)%>">
                <!--此处使用循环来控制每道题目究竟生成多少选项-->
                <% for(var j in item.content){ var res=item.content[j]; %>
                    <div class="mui-input-row mui-radio mui-left" id="item<%=(j+1)%>">
                        <label id="item-lab<%=(j+1)%>"><%=res.lab%></label>
                        <input name="radio<%=(i+1)%>" id="item-rdo<%=(j+1)%>" type="radio">
                    </div>
                    <% } %>
            </div>
        </div>
        <% } %>
</script>
<script>
    //相关的处理事件，动态获取时只需要将for循环替换为AJAX的SUCCESS事件中去就好了。
    $("#generate").on("click", function() {
        //利用图灵接口演示聊天布局
        template.config('escape', false);
        //定义参数类型
        var record = [{
            "title": '题目1',
            "content": [{
                "lab": "测试选项11"
            }, {
                "lab": "测试选项12"
            }, {
                "lab": "测试选项13"
            }, {
                "lab": "测试选项14"
            }]
        }, {
            "title": '题目2',
            "content": [{
                "lab": "测试选项21"
            }, {
                "lab": "测试选项22"
            }, {
                "lab": "测试选项23"
            }, {
                "lab": "测试选项24"
            }]
        }];
        //追加模板消息
        var str = template('radio-tigan', {
            "record": record
        });
        $(".mui-content").html(str);
    })
</script>

我们将上面的代码进行一个分析，可以看到在代码上和（1）有一个很明显的区别，就是我们不再需要在JS代码中使用for循环了。我们的模板也不需要进行拆分了。可以看到对应的模板结构更加清晰了。

第一：我们将相关的资源引入进来，我们可以看到我们只需要引用arttmpl.js文件就好了。这个文件会在结尾的demo文件夹里。大家自行下载即可。

第二：我们将模板写好，模板中可以使用js代码,代码使用<%%>包围起来即可。如下所示：

<!--题目模板-->
<script type="text/templete" id="radio-tigan">
    <!--使用循环来控制创建的题目个数-->
    <% for(var i in record){ var item=record[i]; %>
        <div class="question">
            <h5 class="mui-content-padded" id="tigan<%=(i+1)%>"><%=item.title%></h5>
            <div class="mui-input-group" id="option<%=(i+1)%>">
                <!--此处使用循环来控制每道题目究竟生成多少选项-->
                <% for(var j in item.content){ var res=item.content[j]; %>
                    <div class="mui-input-row mui-radio mui-left" id="item<%=(j+1)%>">
                        <label id="item-lab<%=(j+1)%>"><%=res.lab%></label>
                        <input name="radio<%=(i+1)%>" id="item-rdo<%=(j+1)%>" type="radio">
                    </div>
                    <% } %>
            </div>
        </div>
        <% } %>
</script>

**第三步：我们需要组件JSON数据如下所示：

var record = [{
            "title": '题目1',
            "content": [{
                "lab": "测试选项11"
            }, {
                "lab": "测试选项12"
            }, {
                "lab": "测试选项13"
            }, {
                "lab": "测试选项14"
            }]
        }, {
            "title": '题目2',
            "content": [{
                "lab": "测试选项21"
            }, {
                "lab": "测试选项22"
            }, {
                "lab": "测试选项23"
            }, {
                "lab": "测试选项24"
            }]
        }];

第四：将相关的数据绑定到模板上即可

//追加模板消息
var str = template('radio-tigan', {
        "record": record
});
$(".mui-content").html(str);

是不是很简单，具体操作可以下载Demo自己体验下看看

**下载链接：立即下载

更多推荐

HTML动态生成模板（2）