JavaScript 重新加载 DIV

若要更新一个 div 而不重新加载整个页面，可以将替换内容载入一个稳定的目标元素。jQuery 的 .load() 可以请求当前页面，并从响应中选取该目标元素。另一种做法是使用 window.setInterval() 定时更改目标元素的内容；计时器只负责安排回调，不会自行获取或刷新内容。

下面的 HTML 示例是浏览器页面源码，此处尚未执行。示例从 CDN 加载 jQuery 3.6.0，因此页面需要联网才能载入该库。独立的 JavaScript 消息选择示例已经执行，产生了所示的 Data received 输出；该示例不会访问浏览器 DOM，也不会等待计时器。输出标签 Data received 保持英文。

使用 jQuery .load() 从当前页面重新载入 div

为内容容器设置一个 id，然后在该元素上调用 .load()。第一个参数由 window.location.href（当前页面的网址）、一个空格和选择器 #here 组成。jQuery 会请求该网址，从响应中提取匹配的元素，并将其内容放入现有目标元素。这样只会更新选定区域，而不会替换整个页面。源页面必须返回目标元素，并且页面来源策略和服务器配置必须允许此请求。

请在包含 jQuery 脚本的浏览器页面中运行此示例：

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="here">This content is loaded again from the current page.</div>
<script>
  $(function () {
    $("#here").load(window.location.href + " #here");
  });
</script>

网址加选择器的写法是 jQuery .load() 方法特有的。选择器前要保留一个空格，以便 jQuery 将它与请求网址区分开。如果页面网址带有片段标识符，浏览器不会在 HTTP 请求中发送该片段。

使用选择器只载入 div 的子元素

网址后面的选择器可以进一步缩小响应内容的范围。在 " #here > *" 中，开头的空格用于将选择器与网址分开，#here 匹配源容器，> 则选择它的直接子元素。目标 div 本身不会被选作插入内容。如果源容器是一个包装元素，而你想替换其子元素并保留目标元素本身，可以使用这种写法。

此页面的标记和选择器使用相同的字面 here id：

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="here"><p>First item</p><p>Second item</p></div>
<script>
  $(function () {
    $("#here").load(window.location.href + " #here > *");
  });
</script>

选择器 #here > * 会匹配直接子元素，不会匹配容器内直接存在的文本节点。如果需要选择所有后代元素，请有意选用后代选择器，并确认它会返回哪些标记。

使用 window.setInterval() 按计时器更新 div

当内容需要按固定间隔反复更改时，可以使用 window.setInterval()。延迟时间以毫秒为单位；设置为 6000 ms 时，浏览器会尝试大约每六秒安排一次回调，但页面繁忙时，回调可能延后执行。回调必须实际完成更新，例如将新消息赋给该 div 的 textContent。需要停止更新时调用 window.clearInterval()，例如达到指定更改次数后，或组件被移除时。

下面的浏览器页面源码会轮流显示两条消息，并在两条消息都显示后停止：

<div id="status">Waiting for an update</div>
<script>
  const messages = ["Data received", "Ready for the next request"];
  const status = document.getElementById("status");
  let index = 0;
  const timerId = window.setInterval(function () {
    status.textContent = messages[index];
    index += 1;
    if (index === messages.length) {
      window.clearInterval(timerId);
    }
  }, 6000);
</script>

下面的代码提供一个可运行的 JavaScript 示例，演示如何按顺序选择同一组轮换消息。它只展示选择逻辑，不会访问浏览器 DOM，也不会等待计时器。

const messages = ["Data received", "Ready for the next request"];
let index = 0;

function nextMessage() {
  const message = messages[index];
  index += 1;
  return message;
}

console.log(nextMessage());

Data received

计时器之所以能更改 div，是因为它的回调会更新 textContent；如果倒计时只更改其他位置的数字，就不会刷新 div 中的消息。请根据页面需求选择延迟时间和停止条件。