Resolved: Added Nav through Javascript but it doesn't show on screen

In this post, we will see how to resolve Added Nav through Javascript but it doesn’t show on screen

Question:

Here i created the file brand.html and another file name as nev.js in brand.html file content –

<div class="nev" id="nevbar"></div>
<div class="footer">www.logo.com</div>
<script src="nev.js"></script>

and in nev.js file content –

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);

    nevbarContainer.appendChild(nevbar);

The problem is that it doesn’t show any thing on screen what shoud I do to add navbar throught js

Best Answer:

Your code is valid, you just didn’t add ‘nevbarList’ to the page.

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);

nevbar.appendChild(nevbarList);
nevbarContainer.appendChild(nevbar);

<div class="nev" id="nevbar"></div>
<div class="footer">www.logo.com</div>

If you have better answer, please add a comment about this, thank you!

Source: Stackoverflow.com

Resolved: Added Nav through Javascript but it doesn’t show on screen

Resolved: How to stop a thread that has a blocking function from easygui in python

Resolved: Removing null keys from a json array of objects

Resolved: How can I generate at compile-time a separate OpenAPI Swagger.json file for each Controller in my ASP.NET project?

Question:

Best Answer:

Related Posts

Resolved: How to stop a thread that has a blocking function from easygui in python

Resolved: Removing null keys from a json array of objects

Resolved: How can I generate at compile-time a separate OpenAPI Swagger.json file for each Controller in my ASP.NET project?