Javascript 动态追加html列表

这是我的HTML代码

  <div class="col-lg-12">
    <div class="card">
      <div class="card-header">
        Playlist
      </div>
      <div class="card-body">
        <ul id="playList">
        </ul>
      </div>
    </div>
  </div>
</div>

播放列表

我试图请求一个JSON文件，并使用此代码向html动态添加一个列表

function loadVideoList() {
  const playListContainer = $('#playList');
  $.getJSON('http://myserver.com/rest/78', function( res ) {
    const self = this;
    if(this.videoList !== res){
      $('#playList').empty();
      this.videoList = res;
      res.videos.forEach((item) => {
       console.log('ok');
        playListContainer.append('<li class="playlist-item"><span class="playlist-item-link" uri="' + item.name + '">' + item.tcsd + '</span></li>');
      });
    }
    });

函数loadVideoList（）{
const playList container=$（“#playList”）；
$.getJSON（'http://myserver.com/rest/78，函数（res）{
const self=这个；
如果（this.videoList！==res）{
$（“#播放列表”）.empty（）；
this.videoList=res；
res.videos.forEach（（项目）=>{
console.log（'ok'）；
playlicontainer.append（'
'+item.tcsd+'
'）；
});
}
});

json下载成功后，“ok”被打印n次，但列表没有显示在html上

编辑：

---

这是一个可以重现问题的地方，因为您没有提供小提琴，这很难帮助您。但一般来说，使用ES6 arrow函数进行词汇绑定。我看到您试图通过将其分配给一个名为self的变量来模拟它，但也许使用self而不是这个是一个好主意。我猜，因为您在t中使用了它代码阻塞了它引用的未定义对象，导致没有html可打印。顺便说一句，您提供的函数缺少一个}，所以我添加了一个

试试这个：

function loadVideoList() {
  let playListContainer = $('#playList');
  $.getJSON('http://myserver.com/rest/78', res => {
    if(this.videoList !== res){
      $('#playList').empty();
      this.videoList = res;
      res.videos.forEach((item) => {
       console.log('ok');
        playListContainer.append('<li class="playlist-item"><span class="playlist-item-link" uri="' + item.name + '">' + item.tcsd + '</span></li>');
      });
    }
    });
}

函数loadVideoList（）{
让playlicanner=$（“#playList”）；
$.getJSON（'http://myserver.com/rest/78，res=>{
如果（this.videoList！==res）{
$（“#播放列表”）.empty（）；
this.videoList=res；
res.videos.forEach（（项目）=>{
console.log（'ok'）；
playlicontainer.append（'
'+item.tcsd+'
'）；
});
}
});
}

在添加html之前，我正在调用javascript。我刚在最后移动了javascript，它工作了

也许您在

$（“#playList”）之前调用了这个函数存在。
console.log（playlycontainer.length）
显示了什么？@Mamun那么“ok”怎么会被记录n次呢？@kjkj你能检查一下动态元素吗？它可能是附加的，但元素的位置是其他的location@charlietfl长度始终为0 fiddle不起作用的唯一原因是没有包含jQuery库。当你在这里工作的时候。我猜您没有在document.readyThank中包装函数调用loadVideoList（），但这不起作用。我添加了一个小提琴链接。