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

Question

我想知道如何实现以下目标。我使用 Soundcloud API 将所有播放列表导入网站。这一点，我已经完成了 Soundcloud HTTP 部分。

现在我想将每个 playlist/album 包括该专辑的曲目列表和封面图片放在 div 元素中。那张专辑的持有者。标记的布局很简单：左边是一个包含专辑封面的图形，右边是一个包含专辑曲目的无序列表。

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

我现在拥有的是。在我的 HTML 中，一个 div 持有人持有所有 playlist/album。然后它应该填充每个函数。

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>');

});

以上代码将为每个播放列表创建一个 div，该播放列表的 id 位于包含所有专辑的 albumHolder 中。

总而言之：我想每次都使用相同的布局，并为我使用上述代码创建的 album div 中的每个相册生成该布局。

Answer 1

最佳方法完全取决于您的应用程序的性质！

说，你整个页面只有专辑和相关歌曲，你可以继续，每次都重写HTML！

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

希望这能回答您的问题。

更新：

要替换部分HTML可以参考下面的代码

$('#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>

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

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

javascript

jquery

html

soundcloud