Quiero cambiar el elemento dinámicamente según el ancho de la ventana. Debe cambiar a un nuevo elemento cuando se cumple la condición, así como volver al elemento original cuando la ventana se restablece a su tamaño original. Aquí está mi código adjunto:
HTML
<div> <h1>My Name</h1> </div>JS
const parentDiv = document.querySelector('div'); console.log(window.innerWidth); window.addEventListener('resize', () => { if(window.innerWidth <=1000){ parentDiv.innerHTML = '<p>lorem Ipsum</p>' } }) Pero aquí, después de volver a cambiar el tamaño de la ventana a un ancho de >1000 px, la etiqueta div aún contiene la etiqueta p en lugar de volver a la etiqueta h1 original. ¿Debo agregar otro detector de eventos para esta tarea específica? ¿O hay algún otro método de objeto de window por el cual podamos lograr esto?
Como se sugiere en los comentarios, simplemente agregue una declaración else para volver a <h1> :
window.addEventListener('resize', () => { if(window.innerWidth <=1000){ parentDiv.innerHTML = '<p>lorem Ipsum</p>' } else { parentDiv.innerHTML = '<h1>My Name</h1>' } })FYI, usar consultas de medios CSS es mucho más eficiente que escuchar el evento de cambio de tamaño de la ventana: