初始问题
问题
我目前正在开发一个 Web 项目，但遇到了无法使用纯 JavaScript 显示动态内容的问题。我正在尝试创建一个简单的仪表板页面来呈现“您好，这是仪表板！”屏幕上显示了，但是当我打开页面时，内容没有显示。
描述
我有一个仪表板页面 (Dashboard.html) 和一个负责呈现内容的 JavaScript 文件 (Dashboard.js)。这是我的代码：
// Dashboard.js
const app = document.getElementById("app");
const createDashboardPage = () => {
const container = document.createElement("div");
container.innerHTML = `
<h1>Hello, this is the dashboard!</h1>
<p>This is a simple dashboard page.</p>
`;
return container;
};
const dashboardPage = createDashboardPage();
app.appendChild(dashboardPage);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dashboard</title>
</head>
<body>
<div id="app"></div>
<!-- Include the Dashboard.js script -->
<script type="module" src="./Dashboard.js"></script>
</body>
</html>但是，当我在浏览器中打开 Dashboard.html 时，内容不显示。我已经验证ID为“app”的元素存在，并且浏览器控制台中没有错误。
我尝试过的：
什么可能导致内容不显示，如何解决此问题？使用纯 JavaScript 在网页上呈现动态内容时，我应该注意哪些常见陷阱？
初始问题添加信息
我决定制定一个项目的详细结构。
如果您不熟悉页面以及下面每个文件的工作原理，我已经为每个文件在 hashnode 上编写了一篇快速博客。我已将博客链接链接到每个页面。
我还包含了 Codesandbox
的基本布局
我的项目有一个基本结构：
//load page.
export const loadPage = async (page) => {
const response = await fetch(page);
return response.text();
};
export const loadAllPages = async () => {
const pages = {};
// Load index.html from the root directory
pages.home = await loadPage('index.html');
// Load other pages from the 'userPages' directory
pages.about = await loadPage('userPages/about.html');
return pages;
};
它管理网络应用程序内的导航，确保用户可以在不同视图或页面之间无缝移动，而不会触发全页面刷新。 哈希节点和历史操作
// router.js
import { loadAllPages } from './loadPage';
import { onPopState, pushState } from './pageHistory'; // Import history-related functions
const routes = new Map();
const loadRoutes = async () => {
// Load your routes here
// For example, you can load pages from loadAllPages()
const pages = await loadAllPages();
routes.set('/', pages.home);
routes.set('/about', pages.about);
routes.set('/dashboard', pages.dashboard);
};
const handle404 = () => {
const root = document.getElementById('root');
root.innerHTML = `<div > Sorry we cannot find this page</div>
`;
};
// Define and export onNavClick handler
export const onNavClick = async (pathname) => {
const root = document.getElementById('root');
if (!routes.has(pathname)) {
handle404();
return;
}
const pageContent = routes.get(pathname);
root.innerHTML = pageContent;
// Update the URL using the pushState function from history
pushState({}, '', pathname);
};
const handleRouting = () => {
const pathname = window.location.pathname;
onNavClick(pathname);
};
const router = async () => {
await loadRoutes();
// Set up routing
window.addEventListener('popstate', handleRouting);
// Trigger initial routing
handleRouting();
};
router();
问题：
仪表板页面内容未按预期呈现。当我导航到仪表板路线时，我看到一个空白页面，并且仪表板内容丢失。
附加信息：
所有其他路线（例如/about等）均正常工作。 我已按照之前的建议将 jQuery 包含在 HTML 文件中，但没有任何更改。 我在控制台中没有收到任何错误消息。
问题：
什么可能导致呈现仪表板页面内容时出现问题？
如何确保仪表板页面内容正确加载并显示？
任何见解或建议将不胜感激。谢谢你！
在这种情况下，type="module" 属性没有意义，删除该属性，一切都会按预期工作。 如果该模块的目的是为了避免在全局范围内定义变量，那么只需将所有内容包装在 IIFE 中
我建议尝试创建元素并使用 jQuery 而不是普通 JavaScript 动态显示它。
代码看起来像这样：
$(function() {
createDashboardTitle();
});
createDashboardTitleI() {
let app = $('.app');
let container = document.createElement('container');
container.innerHTML = `
<h1>Hello, this is the dashboard!</h1>
<p>This is a simple dashboard page.</p>
`;
app.append(container);
}