动态添加HTML列表失败：JSON请求成功但列表未显示

我有一段用于展示播放列表的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>

我尝试通过下面的JS代码请求JSON数据并动态添加列表项：

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

目前JSON已经成功下载，控制台也多次打印出ok，但页面上的播放列表始终没有显示出添加的列表项。

问题分析 #

最核心的问题是**this的作用域错误**：在$.getJSON的回调函数里，this指向的是jQuery的AJAX配置对象，而不是你预期的外部函数作用域。这导致this.videoList的赋值和判断完全脱离了你的逻辑预期，甚至可能每次都会执行清空和添加操作，但后续的DOM操作因为作用域问题出现了隐藏bug。

另外还有几个可以优化的细节：

• 已经提前获取了playListContainer变量，却又重复调用$('#playList').empty()，没必要重复做DOM查询
• 没有对响应数据做有效性校验，万一res.videos不是数组会直接报错

修复后的代码 #

function loadVideoList() {
  const playListContainer = $('#playList');
  // 把videoList放在外部作用域，彻底避开this的作用域陷阱
  let videoList = null;
  
  $.getJSON('http://myserver.com/rest/78', function( res ) {
    // 先校验响应数据的有效性
    if (!res || !Array.isArray(res.videos)) {
      console.warn('响应数据格式异常');
      return;
    }
    
    if(videoList !== res){
      playListContainer.empty();
      videoList = res;
      res.videos.forEach((item) => {
        console.log('ok');
        // 用模板字符串让HTML拼接更清晰，减少语法错误
        const listItem = `<li class="playlist-item">
          <span class="playlist-item-link" uri="${item.name}">${item.tcsd}</span>
        </li>`;
        playListContainer.append(listItem);
      });
    }
  });
}

关键修复点 #

1. 解决作用域问题：将videoList定义在loadVideoList函数作用域内，不再依赖this，确保数据对比逻辑正常工作
2. 增加数据校验：避免因响应数据格式错误导致后续代码执行异常
3. 优化DOM操作：全程复用playListContainer变量，减少不必要的DOM查询
4. 提升代码可读性：用ES6模板字符串替代传统字符串拼接，降低语法出错概率

如果修复后还是看不到列表项，可以在控制台执行$('#playList').html()查看是否已有内容被添加。如果有内容但页面不显示，那大概率是CSS样式的问题（比如.playlist-item被设置为display: none或者没有默认的列表样式），可以检查相关CSS规则。

内容的提问来源于stack exchange，提问作者kjkj