在js代码拼接dom对象到页面上去的模板总结(必看)

function fillDialog(dataArray) {  var target = $("#dialogTarget");  target.empty();  for (var i = 0; i < dataArray.length; i++) {    var label = $('<label class="control-label" style="width: auto; text-align: left;"></label>');    label.text("" + dataArray[i].channelName);    var input = $("<input type=/"text/"/>");    input.prop("name", "checkbox");    input.prop("type", "checkbox");    input.prop("value", dataArray[i].id);    if (dataArray[i].showInUserStatistic) {      input.prop("checked", "true");    }    label.prepend(input);    target.append(label);  }}

var trs = "";  for (var i = 0; i < dataArray.length; i++) {    var branchBank = dataArray[i].branch;    var newUser = dataArray[i].newUserNum;    var netBoostUser = dataArray[i].netBoostUserNum;    var closeUser = dataArray[i].closeUserNum;    var activeUser = dataArray[i].activeUserNum;    var index = activeUser.indexOf(".");    if (index > 0) {      //去分行活跃用户数的小数部分如：11.0 ---> 11      activeUser = activeUser.substring(0, index);    }    trs += "<tr><td title='" + branchBank + "'>" + branchBank + "</td>";    trs += "<td title='" + newUser + "'>" + newUser + "</td>";    trs += "<td title='" + netBoostUser + "'>" + netBoostUser + "</td>";    trs += "<td title='" + closeUser + "'>" + closeUser + "</td>";    trs += "<td title='" + activeUser + "'>" + activeUser + "</td>";    trs += "</tr>";  }  newList.append("<tbody>" + trs + "</tbody>");  tableChart.append(newList.show()); var $metric = $("#metric"); $metric.empty(); var optGroup0 = $("<optgroup label='常用指标'>"); var optGroup1 = $("<optgroup label='不常用指标'>"); var optGroup2 = $("<optgroup label='未分组指标'>"); for(var i=0; i<allMetricSources.length; i++) {   var m = allMetricSources[i];   if( m != null && (m.type == stream_type || m.type == 2)){  var option = $("<option ></option>");  option.attr("value", m.metric);  option.attr("data_type", m.data_type);  option.attr("unit", m.unit);  option.html(m.title);  if (m.groupType == 0) {  optGroup0.append(option);  } else if (m.groupType == 1) {  optGroup1.append(option);  } else {  optGroup2.append(option);  }   }  } $metric.append(optGroup0); $metric.append(optGroup1); $metric.append(optGroup2);  if(metric != undefined){ $metric.val(metric);  } $metric.trigger("chosen:updated");function fillRecoveryTable(data) {  var $tableBody = $("#recoveryTable").find("tbody");  $tableBody.empty();  var trs = "";  for (var i = 0; i < data.length; i++) {    var recovery = data[i];    trs += "<tr><td >" + recovery.fileName + "</td>";    trs += "<td >" + recovery.timeString + "</td>";    trs += "<td >" + (recovery.result ? "成功" : "失败") + "</td>";    trs += "<td >" +      "<a onclick=/"removeRecovery('" + recovery.id + "');/" class=/"icon-trash option/" title=/"删除/"></a>" +      "<a onclick=/"doRecovery('" + recovery.id + "');/" class=/"icon-cog option/" title=/"一键恢复/" ></a></td>";    trs += "</tr>";  }  $tableBody.append(trs);}