JavaScript DIV neu laden

Um ein einzelnes div zu aktualisieren, ohne die gesamte Seite neu zu laden, laden Sie Ersatz-Markup in ein stabiles Zielelement. jQuerys .load() kann die aktuelle Seite abrufen und aus der Antwort nur dieses Zielelement auswählen. Eine andere Möglichkeit ist, window.setInterval() zu verwenden, um den Inhalt des Ziels nach einem Zeitplan zu ändern. Der Timer plant die Ausführung, ruft Inhalte aber nicht selbst ab und aktualisiert sie auch nicht.

Die folgenden HTML-Beispiele sind Quelltext für eine Browserseite und wurden hier nicht ausgeführt. Sie verwenden jQuery 3.6.0 von dessen CDN; die Seite benötigt daher Netzwerkzugriff, um diese Bibliothek zu laden. Das eigenständige JavaScript-Beispiel zur Nachrichtenauswahl wurde ausgeführt und gab die gezeigte Ausgabe Data received aus. Es greift weder auf das Browser-DOM zu noch wartet es auf einen Timer.

Ein div der aktuellen Seite mit jQuery .load() neu laden

Weisen Sie dem Inhaltscontainer eine id zu und rufen Sie anschließend .load() für dieses Element auf. Das erste Argument kombiniert window.location.href, also die URL der aktuellen Seite, mit einem Leerzeichen und dem Selektor #here. jQuery ruft diese URL ab, extrahiert das passende Element aus der Antwort und fügt dessen Inhalt in das vorhandene Zielelement ein. So wird nur der ausgewählte Bereich aktualisiert, statt die ganze Seite zu ersetzen. Die Quellseite muss das Zielelement zurückgeben, und die Anfrage muss nach den Regeln für den Seitenursprung und der Serverkonfiguration zulässig sein.

Führen Sie dieses Beispiel in einer Browserseite aus, die das jQuery-Skript einbindet:

<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>

Die URL-mit-Selektor-Form ist speziell für jQuerys Methode .load(). Lassen Sie vor dem Selektor ein Leerzeichen stehen, damit jQuery ihn von der Anfrage-URL unterscheiden kann. Enthält die Seiten-URL ein Fragment, sendet der Browser dieses Fragment nicht als Teil der HTTP-Anfrage.

Mit einem Selektor nur die Kindelemente eines div laden

Mit dem Selektor nach der URL lässt sich die Antwort weiter eingrenzen. In " #here > *" trennt das führende Leerzeichen den Selektor von der URL, #here trifft auf den Quellcontainer zu und > wählt dessen direkte Kindelemente aus. Das Ziel-div selbst wird nicht als einzufügender Inhalt ausgewählt. Verwenden Sie diese Form, wenn der Quellcontainer als Wrapper dient und Sie seine Kinder ersetzen möchten, während das Zielelement bestehen bleibt.

In diesem Beispiel wird dieselbe wörtliche ID here im Markup und im Selektor verwendet:

<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>

Der Selektor #here > * erfasst direkte Kindelemente, aber keine Textknoten, die unmittelbar im Container stehen. Wenn Sie alle Nachfahren benötigen, wählen Sie bewusst einen Nachfahrenselektor und berücksichtigen Sie, welches Markup er zurückgibt.

Ein div mit window.setInterval() zeitgesteuert aktualisieren

Verwenden Sie window.setInterval(), wenn sich der Inhalt wiederholt nach einer festen Verzögerung ändern soll. Die Verzögerung wird in Millisekunden angegeben. Bei 6000 ms plant der Browser den Aufruf einer Callback-Funktion ungefähr alle sechs Sekunden ein; auf stark ausgelasteten Seiten kann sie jedoch später ausgeführt werden. Der Callback muss die Aktualisierung selbst vornehmen, etwa indem er dem textContent des div eine neue Nachricht zuweist. Rufen Sie window.clearInterval() auf, wenn die Aktualisierungen enden sollen, zum Beispiel nach einer festgelegten Anzahl von Änderungen oder wenn eine Komponente entfernt wird.

Der folgende Quelltext für eine Browserseite wechselt zwischen zwei Nachrichten und stoppt, nachdem beide angezeigt wurden:

<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>

Für eine ausführbare JavaScript-Veranschaulichung desselben Nachrichtenwechsels wählt der folgende Code die Nachrichten der Reihe nach aus. Er zeigt die Auswahllogik, greift aber weder auf das Browser-DOM zu noch wartet er auf einen Timer.

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

Der Timer ändert das div, weil sein Callback textContent aktualisiert. Ein Countdown, der lediglich an anderer Stelle eine Zahl ändert, würde die Nachricht im div nicht aktualisieren. Wählen Sie Verzögerung und Abbruchbedingung passend zum Bedarf der Seite.