HTML如何使用模板（1）？
>在不知道如何使用模板的方式動態生成HTML代碼。我們一般是這樣做的。
天啦，不知道看完之後是什麼感受？總之這樣的體驗很不好。既不利於自己修改BUG也不利用修改樣式。
那麼怎麼解決這個問題呢？
當然既然說到這了我們當然是有解決辦法的，
方案（1）：
我們通過jquery的$.load()請求，如，$(“#demo”).load(“data.html”)通過這樣的方式我們可以將data.html裏面的html代碼拿過來，至於怎麼使用就不用說了吧。
我們甚至可以通過ID來加載部分的代碼,如：$(‘#demo’).load(“data.html#test”).這段代碼就是加載data.html中ID爲test的元素的html代碼。
注意：這種方式更適合加載靜態的html代碼，對於需要動態處理的就不太方便了。
方案（2）：
方案二也是我今天需要重點來向大家介紹的，主要是使用
<script type="text/html" id="demo"></script>我們下來看一下需求，我們做前端經常會遇到需要做類似於問卷、答題等需求。題型一般不會很複雜，但是我們需要去動態的生成題目。如果沒有一個好的方法做起來還是比較費時。
先看一個示意圖：
![首界面]()
當點擊通過模板生成題目的時候我們可以看到題目已經被生成出來了。
直接貼代碼讓大家看下：
<!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 type="text/html" id="radio-tigan">
<div class="question">
<h5 class="mui-content-padded" id="tigan{{num}}">{{tigan}}</h5>
<div class="mui-input-group" id="option{{num}}">
<!--此處用來動態追加對應的題目選項-->
</div>
</div>
</script>
<!--選項模板-->
<script type="text/html" id="radio-option">
<div class="mui-input-row mui-radio mui-left" id="item{{num}}">
<label id="item-lab{{num}}">{{lab}}</label>
<input name="radio1" id="item-rdo{{num}}" type="radio">
</div>
</script>
<script>
//相關的處理事件，動態獲取時只需要將for循環替換爲AJAX的SUCCESS事件中去就好了。
$("#generate").on("click", function() {
//獲取題幹模板
for (var i = 1; i <= 10; i++) {
tiganStr = $("#radio-tigan").html();
//替換相關的字段值
tiganStr = del_html_tags(tiganStr, "{{num}}", i); //修改ID的值
tiganStr = del_html_tags(tiganStr, "{{tigan}}", "題目標題文字" + i); //添加題目內容
$(".mui-content").append(tiganStr); //替換之後追加到選項中去
//開始生成題目選項
var optionStr = "";
for (var j = 1; j <= 4; j++) {
optionStr += del_html_tags($("#radio-option").html(), "{{num}}", j); //修改選項的ID
optionStr = del_html_tags(optionStr, "{{lab}}", "測試選項" + i + "" + j); //添加選項的值
}
//將通過ID將選項追加上去
$("#option" + i).append(optionStr);
}
})
//自定義一個方法批量替換制定的字符
function del_html_tags(str, reallyDo, replaceWith) {
var e = new RegExp(reallyDo, "g");
words = str.replace(e, replaceWith);
return words;
}
</script>通過上面的註釋應該很清楚了，我們使用“text/html”類型的Script標籤來動態生成html代碼。基本步驟如下：
第一：將我們所要生成的html代碼拆分成若干個可組合的html代碼片段。如下圖我們將題目拆分成兩部分，(1)是題幹（2）是題目的選項
這樣我們寫兩個《script》標籤把拆分出來
如下所示：
<!--題幹模板-->
<script type="text/html" id="radio-tigan">
<div class="question">
<h5 class="mui-content-padded" id="tigan{{num}}">{{tigan}}</h5>
<div class="mui-input-group" id="option{{num}}">
<!--此處用來動態追加對應的題目選項-->
</div>
</div>
</script>
<!--選項模板-->
<script type="text/html" id="radio-option">
<div class="mui-input-row mui-radio mui-left" id="item{{num}}">
<label id="item-lab{{num}}">{{lab}}</label>
<input name="radio1" id="item-rdo{{num}}" type="radio">
</div>
</script>第二：動態取數據，並將數據動態綁定到模板上
第三：將模板中的元素ID和對應的數據批量替換掉
$("#generate").on("click", function() {
//獲取題幹模板
for (var i = 1; i <= 10; i++) {
tiganStr = $("#radio-tigan").html();
//替換相關的字段值
tiganStr = del_html_tags(tiganStr, "{{num}}", i); //修改ID的值
tiganStr = del_html_tags(tiganStr, "{{tigan}}", "題目標題文字" + i); //添加題目內容
$(".mui-content").append(tiganStr); //替換之後追加到選項中去
//開始生成題目選項
var optionStr = "";
for (var j = 1; j <= 4; j++) {
optionStr += del_html_tags($("#radio-option").html(), "{{num}}", j); //修改選項的ID
optionStr = del_html_tags(optionStr, "{{lab}}", "測試選項" + i + "" + j); //添加選項的值
}
//將通過ID將選項追加上去
$("#option" + i).append(optionStr);
}
})