Ну примерно так
var TemplateRow = (function() {
var $container;
var $containerImages;
var $containerSongs;
var $containerText;
this.create = function() {
$container = $("<div/>").addClass("single");
$containerText = $("<div/>").addClass("text");
$containerImages = $("<div/>").addClass("image");
$containerSongs = $("<div/>").addClass("doc");
$container.append($containerImages)
.append($containerText)
.append($containerSongs);
return this;
};
this.setTextAsHtml = function(value) {
$containerText.html(value);
return this;
};
this.addImage = function(url, title, alt) {
var $block = $("<div/>").addClass("postimage");
var $image = $("<img/>")
.attr("src", url)
.attr("title", title)
.attr("alt", alt);
$block.html($image);
$containerImages.append($block);
return this;
};
this.addSong = function(id, name) {
var $block = $("<div/>").addClass("song");
var $blockId = $("<div/>").addClass("numsong").text(id);
var $blockName = $("<div/>").addClass("namesong").text(name);
$block.append($blockId).append($blockName);
$containerSongs.append($block);
return this;
};
this.getContainer = function() {
return $container;
};
return this;
});
$.each(data, function(index, element) {
var container = new TemplateRow;
container.create().setTextAsHtml(element.text);
$.each(element.image, function(imageIndex, imageUrl) {
container.addImage(imageUrl, "", "");
});
$.each(element.song, function(songIndex, song) {
container.addSong(song.id, song.name);
});
container.getContainer().appendTo("#articles #innerarticles");
});
Первую часть вопроса удалось понять по комментам, вторую не допер