JavaScript Recargar DIV

1. Use window.location.href en .load() para recargar un div en JavaScript
2. Utilice " #id > *" con .load() para recargar un div en JavaScript
3. Use window.setInterval() para actualizar un div en JavaScript

Encontrar una convención de codificación de una línea para recargar un elemento div en JavaScript es difícil. La forma general de recargar o actualizar es ajustar la función onload o activar toda la página web.

Es posible que esto no siempre sea preferible si la página web es voluminosa; lo más probable es que queramos una forma ágil de actualizar ciertas secciones.

Para resolver este problema, dependeremos únicamente de la función jQuery .load() que toma la ruta actual de la página web y agrega la identificación del div junto con ella. Esto es para asegurar que agregaremos específicamente el id para representar la ubicación del div en el contenido de nuestra página web y lo actualizaremos.

Otra forma que seguiremos es rastrear el límite de tiempo después de cuando deseamos actualizar el div. En este caso, necesitaremos un atributo dinámico simple en HTML para colaborar con el límite de tiempo definido por el usuario.

Esto puede no parecer tan dedicado como .load() de jQuery, pero puede ser comparativamente fácil de manejar a través de JavaScript. Pasemos a los bloques de código.

Use window.location.href en .load() para recargar un div en JavaScript

El segmento más importante en este ejemplo es el atributo id que tomaría la instancia div de destino. Cargaremos esa parte de la web con el div y no la entera.

Inicialmente, tendremos un div con una etiqueta span para calcular el marco de tiempo (para comprobar si funciona bien). Más adelante tomaremos una instancia del div (#here) para usar la función load().

En la función .load(), nuestro parámetro sería window.location.href, que hace referencia a la ruta del sitio web actual. Y asociado al #here id asignará el destino y lo actualizará.

Fragmento de código:

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

Producción:

Aquí, nuestro contador cambia cada 3 segundos. Debido a la captura de pantalla, la relación de tiempo puede ser de al menos 3 segundos, pero infiere que el proceso está funcionando.

Utilice " #id > *" con .load() para recargar un div en JavaScript

En esta sección volveremos a utilizar la función .load() y esta vez como parámetro pasaremos " #aquí > *". Considere agregar un espacio antes de indicar el #id.

Esta sección general funcionará como el otro ejemplo explicado.

Fragmento de código:

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

Producción:

Use window.setInterval() para actualizar un div en JavaScript

Aquí, tomaremos un div y estableceremos su atributo id. En la sección de script, activaremos nuestro reloj de conteo.

Este ejemplo puede ser un buen ejemplo en el que tenemos una variedad de contenido para mostrar en la página web después de una cierta cantidad de veces. Supuestamente, tenemos varios div para presentar, y después de cada cuenta regresiva completa, cambiaremos el índice del array.

Así tendremos una forma dinámica de tratar muchos contenidos.

En el ejemplo a continuación, no hemos obtenido ningún tipo de datos de matriz. Más bien acabamos de iniciar el ciclo del reloj. Revisemos la valla de código para obtener una mejor vista previa.

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

Producción: