JavaScript 重新載入 DIV

若要更新單一 div 而不重新載入整個頁面，可以將替換用的標記載入固定的目標元素。jQuery 的 .load() 可以要求目前頁面，並從回應中選取該目標。另一種做法是使用 window.setInterval() 定時變更目標元素的內容；計時器只負責排程，不會自行擷取或更新內容。

以下 HTML 範例是瀏覽器頁面的原始碼，尚未在此執行。範例透過 CDN 載入 jQuery 3.6.0，因此頁面需要網路連線才能取得該程式庫。獨立的 JavaScript 訊息選取範例已執行，並產生所示的 Data received 輸出；這段範例不會存取瀏覽器 DOM，也不會等待計時器。輸出標籤維持英文。

使用 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 中的訊息。請依頁面需求選擇延遲時間與停止條件。