JavaScript DOM Манипуляция не работает (на странице ничего не появляется) ⇐ Html

[Anonymous]

Я работаю над проектом с Webpack, где я пытаюсь динамически генерировать содержание страницы с помощью JavaScript. Однако, когда я загружаю страницу, контент не появляется. Только навигационная панель видна, и я не вижу, чтобы какой -либо контент был добавлен в #Content Div.
Вот разбивка того, что я попробовал:

Код: Выделить всё

/project-folder
/dist
/node_modules
/src
/index.js
/greeting.js
/template.html
.gitignore
package.json
webpack.config.js

index.js

Код: Выделить всё

import { generatePage } from "./greeting";

generatePage()

greeting.js

Код: Выделить всё

export function generatePage(){

const header=document.createElement("h1")
const image=document.createElement("img")
const headertwo=document.createElement("h2")
const paragraph=document.createElement("p")
header.textContent = "Welcome to Our Restaurant!";
headertwo.textContent = "Best Dishes Served Fresh!";
paragraph.textContent = "Our restaurant offers a variety of delicious meals made with love and care.";

const container=document.querySelector("#content")

container.appendChild(header)
container.appendChild(image)
container.appendChild(headertwo)
container.appendChild(paragraph)
}

template.html

Код: Выделить всё

Restaurant Page





Home
Menu
About

webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
clean: true,
},
devtool: "eval-source-map",
devServer: {
watchFiles: ["./src/template.html"],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/template.html",
}),
],
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.html$/i,
loader: "html-loader",
}

],
},
};

< /code>
Что я попробовал: < /p>

Я добавил операторы console.log в index.js и приветствовать.js, чтобы подтвердить, что сценарии работают, но я не вижу никаких журналов в консоли браузера. < /p>
< /li>
Я убедился Сервер разработки WebPack работает, и страница правильно перезаряжается (NPX Webpack Serve). < /p>
< /li>
страница загружается, но только навигационная панель Видимый, и ни один из контента (например, заголовок, изображение и абзац) не добавляется в #Content Div. < /p>
< /li>
< /ul>
Что я ожидаю. Сообщения журнала также не отображаются в консоли.

Подробнее здесь: https://stackoverflow.com/questions/794 ... rs-on-page