如何使用JavaScript实现div元素内容的重新加载？

问题核心 #

你的现有代码仅在页面初始化时执行一次，只会向目标div写入一次时间，没有触发重复更新的逻辑，因此无法实现内容重新加载。

实现方案 #

如果需要定时刷新div内容，可通过setInterval设置定时执行逻辑，以下是可直接运行的完整示例：

HTML代码

<div id="refresh"> 
</div>

JS代码

// 封装内容更新逻辑，便于后续复用调用
function updateRefreshDiv() {
  const x = new Date();
  document.getElementById("refresh").innerHTML = x;
}

// 页面首次加载时先执行一次
updateRefreshDiv();

// 设置每隔1000毫秒（1秒）执行一次更新，可自行调整间隔时长
const refreshTimer = setInterval(updateRefreshDiv, 1000);

// 如果后续需要停止刷新，可执行以下代码
// clearInterval(refreshTimer);

如果不需要定时自动刷新，仅需要在特定操作（比如点击按钮）时触发内容更新，直接调用updateRefreshDiv()函数即可。

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