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

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

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

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

rush:js;"> function fillDialog(dataArray) { var target = $("#dialogTarget"); target.empty(); for (var i = 0; i < dataArray.length; i++) { var label = $(''); label.text("" + dataArray[i].channelName); var input = $("Box"); input.prop("type","checkBox"); input.prop("value",dataArray[i].id); if (dataArray[i].showInUserStatistic) { input.prop("checked","true"); } label.prepend(input); target.append(label); } }

rush:js;"> 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 += "" + branchBank + "" + newUser + "" + netBoostUser + "" + closeUser + "" + activeUser + "" + trs + ""); tableChart.append(newList.show());

var $metric = $("#metric");
$metric.empty();
var optGroup0 = $("");
var optGroup1 = $("");
var optGroup2 = $("");

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.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>" + recovery.fileName + "</td>";
trs += "" + recovery.timeString + "</td>";
trs += "" + (recovery.result ? "成功" : "失败") + "</td>";
trs += "" +
"<a onclick=\"removeRecovery('" + recovery.id + "');\" class=\"icon-trash option\" title=\"删除\">" +
"<a onclick=\"doRecovery('" + recovery.id + "');\" class=\"icon-cog option\" title=\"一键恢复\" ></td>";
trs += "</tr>";
}
$tableBody.append(trs);
}

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