Часто приходится оформлять часть HTML кода, используя данные в JSON формате. Как объединить эти 2 формата? Приведу примеры для фреймфорка Mootools. Используемые приемы применимы и для jQuery.

Исходный JSON объект:

{"previews":[
	{"name":"Blue Earth", "src":"earth-blue.jpg", "description":"A blue version of Earth."},
	{"name":"User Profile", "src":"user.jpg", "description":"A chubby user guy."},
	{"name":"Mouse", "src":"mouse.jpg", "description":"Standard mouse icon."}
]}

Создаем элементы вручную

previews.each(function(image) {
	var el = new Element('div', {'class': 'preview'});
	var name = new Element('h3', {'html': image.name}).inject(el);
	var desc = new Element('span', {'html': image.description}).inject(name, 'after');
	var img = new Element('img', {'src': image.src}).inject(desc, 'after');
	var footer = new Element('span').inject(img, 'after');
	el.inject(gallery);
});

Из недостатков отмечу большой объем JavaScript кода, однако способ вполне применим, если необходимо на лету привязать события к элементам.

Объединение данных

var output = '';
previews.each(function(image) {
	output += ' \
		<div class="preview"> \
			<h3>' + image.name + '</h3> \
			<span>' + image.description + '</span> \
			<img src="' + image.src + '"/> \
		</div>';
});

var output = '';
previews.each(function(image) {
	output += [
		'<div class="preview">', 
			'<h3>', image.name, '</h3>', 
			'<span>', image.description, '</span>', 
			'<img src="', image.src, '"/>', 
		'</div>'].join('');
});

Данный метод сразу приходит в голову, но огромное количество плюсов, запятых, одинарных и двойных кавычек объединяют все в одну кашу.

String.substitute()

var output = '', template;
previews.each(function(image) {
	template = ' \
		<div class="preview"> \
			<h3>{name}</h3> \
			<span>{description}</span> \
			<img src="{src}"/> \
		</div>';
	output += template.substitute(image);
});

Данный метод объекта String ищет выражение в фигурных скобках {} среди ключей переданного объекта image и заменяет его на значение объекта.

Если данный метод отсутствует в фреймворке, вы можете добавить его сами:

String.prototype.substitute = function(o) {
	return this.replace(/{([^{}]*)}/g,
		function(a, b) {
			var r = o[b];
			return typeof r === 'string' || typeof r === 'number' ? r : a;
		}
	);
};