Schematic dom object on the page in js code

Every time I want to dynamically spell a dom in the js code and then append it to the page, it is all kinds of trouble.
It would be great if you could directly create a hidden model on the jsp page. It would be great if you could use the clone method in the js method, and you could also give different set values.
To make it simpler in the future, I put the template in order to make it easier to copy and paste it when it is available later.

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

var trs = "";
for (var i = 0; i &lt; ; 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 = (".");
  if (index &gt; 0) {
    //The decimal part of the number of active users in the branch is as follows: 11.0 ---> 11    activeUser = (0, index);
   }
   trs += "&lt;tr&gt;&lt;td title='" + branchBank + "'&gt;" + branchBank + "&lt;/td&gt;";
   trs += "&lt;td title='" + newUser + "'&gt;" + newUser + "&lt;/td&gt;";
   trs += "&lt;td title='" + netBoostUser + "'&gt;" + netBoostUser + "&lt;/td&gt;";
   trs += "&lt;td title='" + closeUser + "'&gt;" + closeUser + "&lt;/td&gt;";
   trs += "&lt;td title='" + activeUser + "'&gt;" + activeUser + "&lt;/td&gt;";
   trs += "&lt;/tr&gt;";
 }
 ("&lt;tbody&gt;" + trs + "&lt;/tbody&gt;");
 (());

var $metric = $("#metric");
$();
var optGroup0 = $("&lt;optgroup label='Frequently used indicators'&gt;");
var optGroup1 = $("&lt;optgroup label='Not commonly used indicators'&gt;");
var optGroup2 = $("&lt;optgroup label='Ungrouped metrics'&gt;");
for(var i=0; i&lt;; i++) {
var m = allMetricSources[i];
if( m != null &amp;&amp; ( == stream_type ||  == 2)){
  var option = $("&lt;option &gt;&lt;/option&gt;");
  ("value", );
  ("data_type", m.data_type);
  ("unit", );
  ();
  if ( == 0) {
  (option);
  } else if ( == 1) {
  (option);
  } else {
  (option);
  }
 }
}
$(optGroup0);
$(optGroup1);
$(optGroup2);
if(metric != undefined){
  $(metric);
}
$("chosen:updated");

function fillRecoveryTable(data) {
  var $tableBody = $("#recoveryTable").find("tbody");
  $();
  var trs = "";
  for (var i = 0; i &lt; ; i++) {
    var recovery = data[i];
    trs += "&lt;tr&gt;&lt;td &gt;" +  + "&lt;/td&gt;";
    trs += "&lt;td &gt;" +  + "&lt;/td&gt;";
    trs += "&lt;td &gt;" + ( ? "success" : "fail") + "&lt;/td&gt;";
    trs += "&lt;td &gt;" +
      "&lt;a onclick=\"removeRecovery('" +  + "');\" class=\"icon-trash option\" title=\"delete\"&gt;&lt;/a&gt;" +
      "&lt;a onclick=\"doRecovery('" +  + "');\" class=\"icon-cog option\" title=\"One-click recovery\" &gt;&lt;/a&gt;&lt;/td&gt;";
    trs += "&lt;/tr&gt;";
  }
  $(trs);
}

Summarize

The above is the entire content of this article. I hope that the content of this article has certain reference value for your study or work. Thank you for your support. If you want to know more about it, please see the following links