Estoy haciendo una aplicación web basada en Express y axios . Estoy tratando de crear una navegación estática y cargar un archivo HTML en cada clic del menú mientras carga dinámicamente el archivo de script asociado.

Enrutador de página

 ... router.get('/page/home/:location', (req, res) => { const location = req.params.location; fs.readFile(path.resolve(__dirname + `../../../views/pages/${location}.ejs`), (error, html) => { if(error) { res.status(500).end(); } else { res.status(200).end(html); } }); });

Principal(.ejs)

 ... <button class="nav-grid-item-menu-button" type="button" onclick="mainSidebarUiMouseclick(this)" value="diary">Diary</button> ... <div id="content"></div>

Controlador

 const mainSidebarUiMouseclick = (event) => { const content = document.getElementById('content'); let script; // Remove all child content.innerHTML = ''; axios.get(`${window.location.href}/${event.value}`) .then((res) => { content.innerHTML = res.data; }) .then(() => { switch(event.value) { case 'diary': script = document.createElement('script'); script.setAttribute('src', `/js/pages/ui-${event.value}-controller.mjs`); script.setAttribute('crossorigin', 'anonymous'); script.setAttribute('type', 'module'); script.defer = true; script.addEventListener('load', () => { console.info(`@system, Dynamic script loading complete`); }); content.appendChild(script); break; ... } }) .catch((error) => { console.error(`@error, ${error}`); }); };

El script siempre se ejecuta la primera vez que se hace clic sin ningún problema. Sin embargo, si regresa a otro menú después de pasar a otro menú, la secuencia de comandos no se ejecuta con normalidad. Esta estructura no está disponible para document.body . La razón es que todos los archivos de script existentes se borran dinámicamente cuando se hace clic en el menú. ¿Cómo debo solucionarlo?