问题
我目前正在开发一个 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 在网页上呈现动态内容时，我应该注意哪些常见陷阱？
我建议尝试创建元素并使用 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);
}