Javascript 为每个播放列表生成HTML标记的最佳方法是什么？

我想知道我怎样才能做到以下几点。我使用SoundCloudAPI将所有播放列表导入网站。我已经完成了SoundCloudHTTP部分

现在，我想将每个播放列表/专辑（包括该专辑的曲目列表和封面图像）放入

div

元素中。那张专辑的持有者。标记的布局很简单：左边是一个包含专辑封面的图形，右边是一个包含专辑曲目的无序列表

我想问的是，最好的方法是将每张专辑放在一个div中，每次都使用相同的标记

我现在拥有的是。在my

HTML

中，保存所有播放列表/相册的div支架。然后，它应该填充每个函数

HTML

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

JS

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

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

});

var albumHolder=$（'.albums'）；
$（播放列表）。每个功能（索引、播放列表）{
var playlist id=playlist.id；
相册持有人。附加（“”）；
});

上述代码将为每个播放列表创建一个div，其中包含该播放列表的

id

，该播放列表位于保存所有相册的相册架内

总之：我希望每次都使用相同的布局，并为使用上述代码创建的

专辑div

中的每个专辑生成布局。

完全的最佳方式取决于应用程序的性质

比方说，你只有专辑和相关的歌曲，只有在整个页面上，你可以继续和重新编写的HTML每次

但是如果页面上有其他组件（例如，菜单、搜索字段等），在这种情况下，刮取整个页面不是一个好主意！在这里，您应该只重写唱片集和播放列表的父div。这样，您就不必重新加载其他内容，并且可以提供更好的用户体验

希望这能回答你的问题

更新：

要替换HTML的某些部分，可以参考以下代码

$（'#append'）。单击（函数（）{
$（'#container'）。追加（'Hello'）；
});
$（“#替换”）。单击（函数（）{
$（“#container”）.html（‘我刚被替换！’）；
});

我想说：我是虚拟文本

替换虚拟文本
附加Hello
谢谢您的回答。因此，您的建议是只动态填充内容并将其粘贴到我已经用HTML创建的标记中？您可能希望查看JavaScript模板引擎。（顺便说一句，为什么专辑曲目的列表是无序的？专辑上的曲目是按其性质排序的数据。）