使用JavaScript重新加载HTML元素失效问题求助

你遇到的问题很常见——首次加载列表一切正常，但开启5秒定时刷新后，明明接口返回了新数据，页面上的列表却毫无变化。我们来拆解下代码里的问题：

核心问题：只追加新元素，未清空旧列表 #

你的_loadList方法每次调用都会通过append()往userListContainer里添加新的<li>元素，但从来没有清除掉容器里已有的旧列表项。新元素确实被添加进去了，但旧的内容还留在容器中，要么视觉上被旧内容覆盖，要么列表悄悄变长但你没察觉，导致看起来像是“没更新”。

额外小问题：字符串插值错误 #

另外你代码里的'<li> item.name </li>'是直接输出了字符串item.name，而不是变量item.name的实际值，这会导致所有列表项都显示item.name而不是用户名。需要改成模板字符串（推荐）或字符串拼接：

// 模板字符串写法（ES6+）
userListContainer.append(`<li>${item.name}</li>`)
// 或者传统字符串拼接
userListContainer.append('<li>' + item.name + '</li>')

修复方案 #

修改_loadList方法，在渲染新数据前先清空容器：

_loadList(){ 
  HttpUtils.get('http://myserver/list/users/')
    .then((res) => {
      // 第一步：清空容器内的旧内容
      userListContainer.innerHTML = '';
      // 第二步：循环添加新的列表项
      res.forEach((item) => {
        userListContainer.append(`<li>${item.name}</li>`);
      });
    }); 
}

如果需要保留容器上绑定的事件监听（innerHTML会移除所有子元素及事件），可以用循环删除子元素的方式清空：

// 替代innerHTML的清空方式
while (userListContainer.firstChild) {
  userListContainer.removeChild(userListContainer.firstChild);
}

另外，你的setInterval写法可以简化，用箭头函数直接访问this，不用额外保存that：

constructor() {
  this._loadList();
  window.setInterval(() => {
    this._loadList();
  }, 5000);
}

这样每次定时调用_loadList时，都会先清除旧列表，再渲染新数据，页面就能正常更新啦。

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