通过JavaScript动态添加导航栏但页面未显示的问题求助

你代码的核心问题是：创建了导航列表<ul>（变量nevbarList），但没有将它添加到<nav>元素（变量nevbar）中，最终只有空的<nav>被插入到页面，自然看不到导航内容。

修正后的nev.js代码 #

const nevbarContainer = document.getElementById("nevbar");

const nevbar = document.createElement("nav");
const nevbarList = document.createElement("ul");

const homeLink = document.createElement("li");
const homeLinkAnchor = document.createElement("a");
homeLinkAnchor.href = '#';
homeLinkAnchor.textContent = "Brand";
homeLink.appendChild(homeLinkAnchor);

const aboutLink = document.createElement("li");
const aboutLinkAnchor = document.createElement("a");
aboutLinkAnchor.href = '#';
aboutLinkAnchor.textContent = "About";
aboutLink.appendChild(aboutLinkAnchor);

const contactLink = document.createElement("li");
const contactLinkAnchor = document.createElement("a");
contactLinkAnchor.href = '#';
contactLinkAnchor.textContent = "Contact";
contactLink.appendChild(contactLinkAnchor);

nevbarList.appendChild(homeLink);
nevbarList.appendChild(aboutLink);
nevbarList.appendChild(contactLink);

// 关键新增：把导航列表添加到nav元素里
nevbar.appendChild(nevbarList);
nevbarContainer.appendChild(nevbar);

关键改动说明 #

在原有代码的基础上，新增一行nevbar.appendChild(nevbarList);，将包含所有导航项的<ul>插入到<nav>元素内部，再把<nav>插入到页面容器中，这样整个导航结构就完整渲染到DOM里了。

如果需要让导航栏布局更美观，可在brand.html中添加基础样式：

<style>
  .nev ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 20px;
  }
  .nev a {
    text-decoration: none;
    color: #333;
  }
</style>

内容的提问来源于stack exchange，提问作者Gayatri Dyunakhe