HTML字符串通过jQuery追加 [英] HTML String via jQuery append
问题描述
我想使用jQuery append生成以下HTML字符串。手动编写代码对我来说太麻烦了。
I want to generate following HTML string using jQuery append. Writing code manually looks too cumbersome to me.
<div>
<label>Name (Optional)</label>
<input type='text' class='form-control' id='job-name'/><br />
<label>Quick Schedule</label><br />
<a class="btn btn-primary" onclick="schedule = '@hourly'; job_string();">Hourly</a>
<a class="btn btn-primary" onclick="schedule = '@daily'; job_string();">Daily</a>
<a class="btn btn-primary" onclick="schedule = '@weekly'; job_string();">Weekly</a>
<a class="btn btn-primary" onclick="schedule = '@monthly'; job_string();">Monthly</a>
<a class="btn btn-primary" onclick="schedule = '@yearly'; job_string();">Yearly</a><br /><br />
<div class="row">
<div class="col-md-2">Minute</div>
<div class="col-md-2">Hour</div>
<div class="col-md-2">Day</div>
<div class="col-md-2">Month</div>
<div class="col-md-2">Week</div>
</div>
<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>
</div>
例如，它应该用类似下面的格式编写。
For example, it should be written something like in the format below.
$('<div/>').append(
).append(
) ....
使用jQuery追加创建上述HTML的最佳方法是什么？这里的领导非常感谢。
What is the best possible way to create HTMLs like above using jQuery append? Lead here is really appreciated.
推荐答案
您可以使用树状数据结构表示HTML。完成后，您可以遍历树，并为每个节点创建相应的元素并将其附加到目标元素。
You can represent the HTML with a tree-like data structure. Once that's done, you can traverse the tree, and for every node, create the corresponding element and append it to your target element.
功能样式编程似乎很合适用最少量的代码创建上述对象。您可以使用函数组合抽象创建复杂结构。此外，您可以使用数组和更高阶函数（如map）批量创建元素。
Functional style programming seems like a good fit for creating the aforementioned object with minimum amount of code. You can abstract creating complex structures with function composition. Additionally, you can use arrays and higher order functions (like map) to batch-create the elements.
为了让您了解它是如何完成的，请考虑以下模型（接口）用于表示节点（元素）：
To give you an idea of how it's done, consider the following model (interface) for representing the nodes (elements):
interface Node {
tag: string;
classNames: string[];
attrs: {
[key: string]: string;
};
eventHandlers: {
[key: string]: (...params: any[]) => any;
};
children: Node[];
textChildren: string[];
}
注意：上面的类型定义是写的在打字稿中。显然，你可以忽略类型并实现我在纯JavaScript中描述的内容。
Note: The type definition above, is written in Typescript. Obviously, you can ignore types and implement what I described in plain 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>
让我们定义一些辅助函数，这样我们就可以更容易地创建等效树了：
Let's define a few helper functions, so we can create the equivalent tree easier:
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]
});
使用上面定义的函数，创建等效树非常简单：
Using the functions defined above, creating the equivalent tree is as easy as:
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包装）元素，您可以执行以下操作：
And to convert this object to a (JQuery wrapped) element you can do:
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));
演示
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>
这篇关于HTML字符串通过jQuery追加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
