Существует методика, называемая supplant , которая делает это. Я не писал это, я думаю, что Дуглас Крокфорд написал. Но я процитирую это:
Теперь, когда ваша программа JavaScript получила данные, что она может с ними сделать? Одна из самых простых вещей - генерация HTML на стороне клиента.
var template = '<table border="{border}"><tr><th>Last</th><td>{last}</td></tr>' +
'<tr><th>First</th><td>{first}</td></tr></table>';
Обратите внимание, что у нас есть шаблон HTML с тремя переменными. Затем мы получим объект JSON, содержащий члены, соответствующие переменным.
var data = {
"first": "Carl",
"last": "Hollywood",
"border": 2
};
Затем мы можем использовать метод вытеснения, чтобы заполнить шаблон данными.
mydiv.innerHTML = template.supplant(data);
Строки JavaScript не поставляются с методом вытеснения, но это нормально, поскольку JavaScript позволяет нам расширять встроенные типы, предоставляя им необходимые нам функции.
String.prototype.supplant = function (o) {
return this.replace(/{([^{}]*)}/g,
function (a, b) {
var r = o[b];
return typeof r === 'string' ?
r : a;
}
);
};
С http://www.json.org/fatfree.html
Одна из техник, которую я видел, чтобы избежать беспорядочного назначения переменных в шаблоне, заключается в следующем:
<script id="rowTemplate" type="text/html">
<tr>
<td>Field A:</td>
<td><input type='text' name='fielda[{id}]'></td>
<td>Field B:</td>
<td><textarea name='fieldb[{id}]'></textarea></td>
</tr>
</script>
Это позволит вам писать намного более красивый код, так как вы можете ссылаться на него с помощью getElementById.
Так что в вашем случае, вместо того, чтобы заполнять его объектом JSON, вы просто просматриваете сколько бы строк вы не добавили и не заменили идентификаторы.