What is the best way to generate HTML markup for each playlist?

I was wondering how I can achieve the following. I make use of the Soundcloud API to import all playlists to a website. This, I have done with the Soundcloud HTTP part.

Now I want to put each playlist/album including the tracklist and cover image of that album inside a div element. The holder of that album. The layout of the markup is simple: left a figure that holds the album cover, right an unordered list with the tracks of the album.

What I want to ask is, what the best way is to put every album in a div with every time the same markup.

What I have now is. In my HTML a div-holder that holds all the playlist/albums. Then it should fill with the each function.

HTML

<div class="row albums"></div> <!-- All albums here -->

var albumHolder = $('.albums');
$(playlists).each(function(index, playlist) {
    var playlistID = playlist.id;

    albumHolder.append('<div id="#' + playlistID + '"></div>');

});

Above code will create for each playlist a div with the id of that playlist inside the albumHolder that holds all the albums.

So in summary: I would like to use the same layout every time and generate that for each album inside that album div that I create with above code.

Solution

The best way totally depends on the nature of your application!

Say, you have only album and related songs only in the entire page that you can go ahead and re-write the HTML every time!

But if you have other components on the page (for example, menus, search field etc..) in this case it is not a good idea to scrape the entire page! Here you should re-write only parent-div of album and playlist. This way you don't have to reload other stuff and you can provide a better user experience.

Hope this answers your question.

UPDATE:

To replace some part of the HTML you can refer the below code

$('#append').click(function(){
	$('#container').append('<b> Hello </b>');
	
});
$('#replace').click(function(){
	$('#container').html('<b> I am just replaced!</b>');
	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I would like to say: <span id="container">I am the Dummy Text</span></p>
<button id="replace">Replace Dummy Text</button>
<button id="append">Append Hello</button>