如果您打算执行密集的 AJAX 任务，例如添加新记录、即时编辑它们等，那么我建议您加载一个空页面，该页面调用一个脚本，该脚本返回一个 JSON 字典数组, 然后使用最近在 jQuery 中实现的Template (beta) 系统，或者自己实现一个，有一个隐藏元素，带有带有类的 spans/divs/tds 标记，并在每次新记录到达时克隆和填充它。
另一方面，如果您要保持此静态，只需使用 HTML。
这就是我管理模板的方式。这是一种有效的方法，因为 DOM 元素确实存在于 DOM 树中，而且克隆比解析包含元素的字符串更便宜。
<html>
<head>
<script type="text/javascript">
$(function() {
$contactTemplate = $("#contact_template")
function makeContactElement(data) {
var $newElem = $contactTemplate.clone(true)
$newElem.attr("data-id", data.id)
$newElem.find(".name").text( data.firstName + " " + data.lastName )
for(var i in data.info) {
$newElem.find(".info").append( makeInfoElement(data.info[i]) )
}
return $newElem
}
$infoTemplate = $("#info_template")
function makeInfoElement(data) {
var $newElem = $infoTemplate.clone(true)
$newElem.find("infoLabel").text(info.label)
$newElem.find("infoPiece").text(info.piece)
return $newElem
}
$.getJSON('/foo.bar', null, function(data) {
for(var i in data) {
$("#container").append( makeInfoElement(data[i]) )
}
})
})
</script>
<style type="text/css">
.template { display: none; }
</style>
</head>
<body>
<div id="container">
</div>
<!-- Hidden elements -->
<div id="contact_template" class="contact template">
<a rel="123" class="name"></a>
<div class="info"></div>
</div>
<div id="info_template" class="template">
<div class="infoLabel"></div>
<div class="infoPiece"></div>
</div>
</body>
</html>
然后，当您创建一条新记录时，只需用信息填充一个数据对象，您就可以确定所有元素流都是通用的。
使用.clone(true) 打开了制作通用事件的大门，而不是绑定一个更昂贵的实时事件。
例如，如果你想制作一个删除记录的按钮：
<script ...>
...
$("#contact_template .delete").click(function() {
var id = $(this).parents("contact").attr("data-id")
$.post('/foo.bar', { action: delete, id: id }, function() { ... })
return false
})
</script>
...
<div id="contact_template" class="contact template">
<a href="#" class="delete">Delete</a>
</div>
祝你好运！