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?