JavaScript DIV neu laden

1. Verwenden Sie window.location.href in .load(), um ein div in JavaScript neu zu laden
2. Verwenden Sie " #id > *" mit .load(), um ein div in JavaScript neu zu laden
3. Verwenden Sie window.setInterval(), um ein div in JavaScript zu aktualisieren

Es ist schwierig, eine einzeilige Codierungskonvention zum Neuladen eines div-Elements in JavaScript zu finden. Die allgemeine Methode zum Neuladen oder Aktualisieren besteht darin, die Funktion onload anzupassen oder die gesamte Webseite auszulösen.

Dies wird möglicherweise nicht immer bevorzugt, wenn die Webseite umfangreich ist; Wahrscheinlicher ist, dass wir bestimmte Abschnitte auf agile Weise aktualisieren möchten.

Um dieses Problem zu lösen, verlassen wir uns ausschließlich auf die jQuery-Funktion .load(), die den aktuellen Pfad der Webseite nimmt und die ID des div hinzufügt. Dadurch soll sichergestellt werden, dass wir die id speziell hinzufügen, um die Position des div in unseren Webseiteninhalten darzustellen, und diese aktualisieren.

Eine andere Möglichkeit, der wir folgen werden, besteht darin, die zeitgebundene Zeit zu verfolgen, nach der wir das div aktualisieren möchten. In diesem Fall benötigen wir ein einfaches dynamisches Attribut in HTML, um mit der benutzerdefinierten Zeitgrenze zusammenzuarbeiten.

Dies mag nicht so dezidiert erscheinen wie .load() von jQuery, kann aber über JavaScript vergleichsweise einfach zu handhaben sein. Kommen wir zu den Codeblöcken.

Verwenden Sie window.location.href in .load(), um ein div in JavaScript neu zu laden

Das wichtigste Segment in diesem Beispiel ist das id-Attribut, das die gezielte div-Instanz annehmen würde. Wir laden den Teil der Webseite mit dem div und nicht den ganzen.

Zunächst haben wir ein div mit einem span-Tag, um den Zeitrahmen zu berechnen (um zu überprüfen, ob es gut funktioniert). Später werden wir eine Instanz des div (#here) nehmen, um die Funktion load() zu verwenden.

In der Funktion .load() wäre unser Parameter die window.location.href, die auf den Pfad der aktuellen Website verweist. Und verbunden mit der #here id wird das Ziel zugewiesen und aktualisiert.

Code-Auszug:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div>
   <div id="here">dynamic content <span id='off'>9</span></div>
   <div>ABC</div>
</div>
<script>
   $(document).ready(function(){
       var counter = 9;
   window.setInterval(function(){
    counter = counter - 3;
     if(counter>=0){
       document.getElementById('off').innerHTML=counter;
     }
     if (counter===0){
       counter=9;
     }
     $("#here").load(window.location.href + " #here" );
   }, 3000);
   });
</script>

Ausgabe:

Hier wird unser Zähler alle 3 Sekunden geändert. Aufgrund des Screenshots kann das Zeitverhältnis mindestens 3 Sekunden betragen, aber es lässt darauf schließen, dass der Prozess funktioniert.

Verwenden Sie " #id > *" mit .load(), um ein div in JavaScript neu zu laden

In diesem Abschnitt verwenden wir wieder die Funktion .load() und übergeben diesmal als Parameter " #here > *". Erwägen Sie, ein Leerzeichen hinzuzufügen, bevor Sie die #id angeben.

Dieser Gesamtabschnitt verhält sich wie das andere erläuterte Beispiel.

Code-Auszug:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div>
   <div id="here"> again dynamic content <span id='off'>3</span></div>
   <div>ABC</div>
</div>
<script>
   $(document).ready(function(){
       var counter = 3;
   window.setInterval(function(){
    counter--;
     if(counter>=0){
       document.getElementById('off').innerHTML=counter;
     }
     if (counter===0){
       counter=3;
     }
   $("#here").load(" #here > *");
   }, 1000);
   });
</script>

Ausgabe:

Verwenden Sie window.setInterval(), um ein div in JavaScript zu aktualisieren

Hier nehmen wir ein div und setzen sein id-Attribut. Im Skriptabschnitt aktivieren wir unsere Zähluhr.

Dieses Beispiel kann ein gutes Beispiel dafür sein, wo wir eine Reihe von Inhalten haben, die nach einer bestimmten Zeit auf der Webseite angezeigt werden sollen. Angeblich müssen wir mehrere div präsentieren, und nach jedem vollständigen Countdown der Zeit werden wir den Array-Index ändern.

So werden wir mit vielen Inhalten dynamisch umgehen können.

Im folgenden Beispiel haben wir keine solchen Array-Daten abgerufen. Vielmehr haben wir gerade den Taktzyklus initiiert. Lassen Sie uns den Codezaun für eine bessere Vorschau überprüfen.

<div>
    The DIV below will refresh after <span id="cnt" style="color:red;">7</span> Seconds
</div>
</body>
<script>
var counter = 7;
    window.setInterval(function () {
        counter--;
        if (counter >= 0) {
            var span;
            span = document.getElementById("cnt");
            span.innerHTML = counter;
        }
        if (counter === 0) {
            counter = 7;
        }

    }, 1000);
  </script>

Ausgabe: