JavaScript Recargar DIV

Para actualizar un div sin navegar por toda la página, carga el marcado de reemplazo en un elemento de destino estable. El método .load() de jQuery puede solicitar la página actual y seleccionar de la respuesta únicamente ese elemento. Otra opción es usar window.setInterval() para cambiar el contenido del destino según un intervalo; el temporizador programa una tarea, pero por sí solo no obtiene ni actualiza contenido.

Los ejemplos HTML siguientes son código fuente para una página del navegador y no se han ejecutado. Usan jQuery 3.6.0 desde su CDN, por lo que la página necesita acceso a la red para cargar esa biblioteca. El ejemplo independiente de JavaScript que selecciona mensajes sí se ejecutó y produjo la salida indicada, Data received; esa etiqueta permanece en inglés. El ejemplo no accede al DOM del navegador ni espera a que transcurra un temporizador.

Recargar un div de la página actual con jQuery .load()

Asigna un id al contenedor del contenido y luego llama a .load() en ese elemento. El primer argumento combina window.location.href, la URL de la página actual, con un espacio y el selector #here. jQuery solicita esa URL, extrae de la respuesta el elemento coincidente e inserta su contenido en el destino existente. Así se actualiza la parte seleccionada en lugar de reemplazar toda la página. La página de origen debe devolver el elemento de destino, y la solicitud debe estar permitida por el origen de la página y la configuración del servidor.

Ejecuta este ejemplo en una página del navegador que incluya el script de 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>

El formato de URL más selector es específico del método .load() de jQuery. Deja un espacio antes del selector para que jQuery pueda distinguirlo de la URL de la solicitud. Si la URL de la página contiene un fragmento, el navegador no lo envía como parte de la solicitud HTTP.

Cargar solo los elementos secundarios de un div con un selector

El selector que sigue a la URL permite limitar aún más la respuesta. En " #here > *", el espacio inicial separa el selector de la URL, #here coincide con el contenedor de origen y > selecciona sus elementos secundarios directos. El propio div de destino no se selecciona como contenido que se insertará. Usa esta forma cuando el contenedor de origen sea un envoltorio y quieras reemplazar los elementos secundarios del destino sin quitar el elemento de destino.

Esta página usa el mismo ID literal here en el marcado y en el selector:

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

El selector #here > * incluye los elementos secundarios directos, pero no los nodos de texto que estén directamente dentro del contenedor. Si necesitas seleccionar todos los descendientes, elige deliberadamente un selector de descendientes y ten en cuenta el marcado que devolverá.

Actualizar un div con un temporizador mediante window.setInterval()

Usa window.setInterval() cuando el contenido deba cambiar repetidamente con un intervalo fijo. El intervalo se expresa en milisegundos: con 6000 ms, el navegador programa una función de retorno aproximadamente cada seis segundos, aunque en páginas con mucha actividad podría ejecutarla más tarde. La función debe realizar la actualización; por ejemplo, asignar un mensaje nuevo a textContent del div. Llama a window.clearInterval() cuando deban detenerse las actualizaciones, por ejemplo, después de un número fijo de cambios o al quitar un componente.

El siguiente código fuente para una página del navegador alterna entre dos mensajes y se detiene después de mostrarlos ambos:

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

Para ilustrar la misma rotación de contenido con JavaScript ejecutable, el código siguiente selecciona cada mensaje en orden. Este código demuestra la lógica de selección; no accede al DOM del navegador ni espera a que transcurra un temporizador.

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

El temporizador cambia el div porque su función de retorno actualiza textContent; una cuenta atrás que solo cambie un número en otro lugar no actualizaría el mensaje del div. Elige el intervalo y la condición de parada según las necesidades de la página.