Template summary in js code splicing dom object to page of must see

Every time I want to spell an dom dynamically in js code, and then append to the page, it is all kinds of troubles.

If you can get a hidden model directly on the jsp page, it is very good, and it is also very good to use clone method in js method, and you can also give set values to different parts.

For the sake of simplicity in the future, I will put the template so that I can copy and paste it when I need it later.

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) {
      // The fractional part of the number of active users in the branch is as follows: 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=' Commonly used indicators '>");
 var optGroup1 = $("<optgroup label=' Not commonly used indicators '>");
 var optGroup2 = $("<optgroup label=' Ungrouped indicators '>");

 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 ? " Success " : " Failure ") + "</td>";
    trs += "<td >" +
      "<a onclick=\"removeRecovery('" + recovery.id + "');\" class=\"icon-trash option\" title=\" Delete \"></a>" +
      "<a onclick=\"doRecovery('" + recovery.id + "');\" class=\"icon-cog option\" title=\"1 Key recovery \" ></a></td>";
    trs += "</tr>";
  }
  $tableBody.append(trs);
}