新しいレコードを追加したり、編集したりするなど、集中的なAJAXタスクを実行する予定の場合は、空のページを読み込んで、辞書の配列を返すスクリプトを呼び出してくださいjQueryで実装されたTemplate（ベータ版）システムを使用するか、隠し要素を持つ、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>
幸運！
+1パフォーマンスの観点からは素晴らしい答えです。また、HTMLとJSONの間の決定は、データが静的で表示目的のみであるかどうか、後で操作するかどうかによっても異なります。 –