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

每次在js代码里面想动态的拼个dom，然后append到页面上，都是各种麻烦，

要是可以直接在jsp页面弄个隐藏的model那是很好的，用js方法里面的clone方法也是很好的，还可以给不同部分set值。

为了以后简单点，我就把模板摆着，方便后面用得着的时候，复制粘贴。

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);
}

以上这篇在js代码拼接dom对象到页面上去的模板总结(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。