本文总结了JavaScript中动态生成和插入DOM元素的四种常见实现模式。通过具体代码示例，分别展示了使用jQuery创建表单控件、字符串拼接生成表格行、动态构建Select选项组以及渲染恢复列表的方法。这些模板旨在简化前端开发中动态内容生成的复杂度，提供可直接复用的代码片段，帮助开发者更高效地处理页面交互与数据渲染。
动态生成DOM的常见场景与模板概述
在前端开发中，经常需要在JavaScript中动态生成DOM元素并将其追加到页面，这一过程往往涉及繁琐的代码编写。为了简化这一流程，一种常见的做法是在JSP或HTML页面中预先定义隐藏的模板节点，利用JavaScript的克隆方法（clone）进行复用；另一种方式则是通过JavaScript直接构建元素并设置属性。为了方便后续开发中快速调用，本文将整理几种常用的DOM拼接模板，供开发者直接复制使用。
使用jQuery动态创建表单控件
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());
动态构建Select下拉选项组
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);
}总结
以上内容涵盖了动态生成DOM的主要实现方式。希望这些模板能为您的前端开发工作提供便利。如需了解更多相关技术细节，请查阅本站的其他文章。感谢您的支持。