使用纯 JavaScript 显示动态内容有困难

问题描述 投票：0回答：1

问题
 我目前正在开发一个 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”的元素存在，并且浏览器控制台中没有错误。

我尝试过的：

  1. 检查 Dashboard.html 中是否存在“app”元素。
  2. 验证Dashboard.html中的脚本标签指向正确 JavaScript 文件。
  3. 确保 Dashboard.js 的文件路径正确。
  4. 确认浏览器控制台中没有 JavaScript 错误。

什么可能导致内容不显示，如何解决此问题？使用纯 JavaScript 在网页上呈现动态内容时，我应该注意哪些常见陷阱？

javascript html dom
1个回答
0
投票

我建议尝试创建元素并使用 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);
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.