您可以使用树状数据结构来表示 HTML。完成后，您可以遍历树，并为每个节点创建相应的元素并将其附加到目标元素。
函数式编程似乎非常适合用最少的代码创建上述对象。您可以通过函数组合来抽象创建复杂的结构。此外，您可以使用数组和高阶函数（如映射）来批量创建元素。
为了让您了解它是如何完成的，请考虑以下用于表示节点（元素）的模型（接口）：
interface Node {
tag: string;
classNames: string[];
attrs: {
[key: string]: string;
};
eventHandlers: {
[key: string]: (...params: any[]) => any;
};
children: Node[];
textChildren: string[];
}
Note：上面的类型定义是用 Typescript 编写的。显然，您可以忽略类型并实现我在纯 JavaScript 中描述的内容。
现在考虑以下标记：
<div class="row">
<div class="col-md-2"><input type="text" class="form-control" id="job-minute" value="*" onclick="this.select();"/></div>
<div class="col-md-2"><input type="text" class="form-control" id="job-hour" value="*" onclick="this.select();"/></div>
<div class="col-md-2"><input type="text" class="form-control" id="job-day" value="*" onclick="this.select();"/></div>
<div class="col-md-2"><input type="text" class="form-control" id="job-month" value="*" onclick="this.select();"/></div>
<div class="col-md-2"><input type="text" class="form-control" id="job-week" value="*" onclick="this.select();"/></div>
<div class="col-md-2"><a class="btn btn-primary" onclick="set_schedule();">Set</a></div>
</div>
让我们定义一些辅助函数，这样我们就可以更容易地创建等效的树：
const createRow = (children) => ({
tag: "div",
classNames: ["row"],
attrs: {},
eventHandlers: {},
children,
textChildren: []
});
const createCol = (cls, children) => ({
tag: "div",
classNames: [cls],
attrs: {},
eventHandlers: {},
children,
textChildren: []
});
const createFormInput = (attrs, eventHandlers) => ({
tag: "input",
attrs,
classNames: ["form-control"],
eventHandlers,
children: [],
textChildren: []
});
const createFormInputTextInCol = id =>
createCol("col-md-2", [
createFormInput(
{
type: "text",
id,
value: "*"
},
{
click() {
this.select();
}
}
)
]);
const createAnchorButton = (text, eventHandlers) => ({
tag: "a",
attrs: {},
classNames: ["btn", "btn-primary"],
eventHandlers,
children: [],
textChildren: [text]
});
使用上面定义的函数，创建等效的树非常简单：
const row = createRow([
...["job-minute", "job-hour", "job-day", "job-month", "job-week"].map(
createFormInputTextInCol
),
createCol("col-md-2", [
createAnchorButton("Set", {
click() {
// TODO: define set_schedule
// set_schedule();
}
})
])
]);
要将这个对象转换为（JQuery 包装的）元素，您可以执行以下操作：
const toElement = node => {
const element = $(`<${node.tag}>`);
Object.keys(node.attrs).forEach(key => {
element.attr(key, node.attrs[key]);
});
element.addClass(node.classNames.join(" "));
Object.keys(node.eventHandlers).forEach(key => {
element.on(key, function(...args) {
node.eventHandlers[key].call(this, ...args);
});
});
node.textChildren.map(text => document.createTextNode(text)).forEach(e => element.append(e));
node.children.map(toElement).forEach(e => element.append(e));
return element;
};
$('<div />').append(toElement(row));
Demo
const createRow = (children) => ({
tag: "div",
classNames: ["row"],
attrs: {},
eventHandlers: {},
children,
textChildren: []
});
const createCol = (cls, children) => ({
tag: "div",
classNames: [cls],
attrs: {},
eventHandlers: {},
children,
textChildren: []
});
const createFormInput = (attrs, eventHandlers) => ({
tag: "input",
attrs,
classNames: ["form-control"],
eventHandlers,
children: [],
textChildren: []
});
const createFormInputTextInCol = id =>
createCol("col-md-2", [
createFormInput({
type: "text",
id,
value: "*"
}, {
click() {
this.select();
}
})
]);
const createAnchorButton = (text, eventHandlers) => ({
tag: "a",
attrs: {},
classNames: ["btn", "btn-primary"],
eventHandlers,
children: [],
textChildren: [text]
});
const row = createRow([
...["job-minute", "job-hour", "job-day", "job-month", "job-week"].map(
createFormInputTextInCol
),
createCol("col-md-2", [
createAnchorButton("Set", {
click() {
// TODO: define set_schedule
// set_schedule();
}
})
])
]);
const toElement = node => {
const element = $(`<${node.tag}>`);
Object.keys(node.attrs).forEach(key => {
element.attr(key, node.attrs[key]);
});
element.addClass(node.classNames.join(" "));
Object.keys(node.eventHandlers).forEach(key => {
element.on(key, function(...args) {
node.eventHandlers[key].call(this, ...args);
});
});
node.textChildren.map(text => document.createTextNode(text)).forEach(e => element.append(e));
node.children.map(toElement).forEach(e => element.append(e));
return element;
};
$(document).ready(() => {
const rowElement = toElement(row);
$("#wrapper").html(rowElement);
$("#outerHtml").text($("#wrapper").html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<h2>Generated HTML</h2>
<pre id="outerHtml"></pre>
<h2>Appended Element</h2>
<div id="wrapper"></div>
