javascripttypescriptdomnavbar

How do I make HTML code using typescript?


I have no experience with javascript and typescript. When I used PHP I made a navbar into a function that would echo the html code. Is this also achievable using typescript? I have made a function that returns a string of html code, but I don't know how to actually make it render the html when I call the function on my html page (if the typescript code would even be correct). My school demands that I use typescript.

export function navbar(): string {
    const menuItems: MenuItems = {
        Home: "index.html",
        About: "about.html",
        FAQ: "faq.html",
        Contact: "contact.html",
    };
    let htmlCode: string = "<nav><ul>";

    for (const [key, value] of Object.entries(menuItems)) {
        htmlCode += `<li><a src="${key}">${value}</a></li>`;
    }
    htmlCode += "</nav></ul>";

    return htmlCode;
}

edit: I now have tried this

type MenuItems = {
    [key: string]: string;
};

export function createNavbar(): void {
    const navigation: HTMLElement = document.createElement("nav");
    const unorderedList: HTMLUListElement = document.createElement("ul");
    const menuItems: MenuItems = {
        Home: "index.html",
        About: "about.html",
        FAQ: "faq.html",
        Contact: "contact.html",
    };

    for (const [key, value] of Object.entries(menuItems)) {
        const listItem: HTMLElement = document.createElement("li");
        const anchor: HTMLAnchorElement = document.createElement("a");

        anchor.textContent = key;
        anchor.href = value;

        listItem.appendChild(anchor);
        unorderedList.appendChild(listItem);
    }

    navigation.appendChild(unorderedList);
    document.body.appendChild(navigation);
}

and this for my html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../assets/css/style.css" />
    <title>test</title>
</head>
<body>
    <script src="../src/common.ts"></script>
    <script>createNavbar()</script>
</body>
</html>

it still does not seem to work. I've got a blank page


Solution

  • You're almost there.

    There are a handful of ways to buld DOM Fragments but one way is to repeatedly use:


    Working Example

    const buildNavbar = () => {
    
      const menuItems = {
        Home: "index.html",
        About: "about.html",
        FAQ: "faq.html",
        Contact: "contact.html",
      };
      
      // BUILD <nav> ELEMENT
      const navbarNavigation = document.createElement('nav');
    
      // BUILD <ul> ELEMENT
      const navbarUnorderedList = document.createElement('ul');
    
      for (const [key, value] of Object.entries(menuItems)) {
    
        // BUILD <li> ELEMENT
        const navbarListItem = document.createElement('li');
        
        // BUILD <a> ELEMENT AND APPEND TO <li> ELEMENT
        const navbarAnchor = document.createElement('a');
        navbarAnchor.setAttribute('href', value);
        navbarAnchor.textContent = key;
        navbarListItem.appendChild(navbarAnchor);
    
        // APPEND <li> ELEMENT TO <ul> ELEMENT
        navbarUnorderedList.appendChild(navbarListItem);
      }
      
      // APPEND <ul> ELEMENT TO <nav> ELEMENT
      navbarNavigation.appendChild(navbarUnorderedList);
    
      // APPEND <nav> ELEMENT TO <body> ELEMENT
      document.body.appendChild(navbarNavigation);
    }
    
    buildNavbar();


    N.B. Not uncommonly you'll see approaches which concatenate strings / template literals and then utilise the innerHTML property, something like this:

      const menuItems = {
        Home: "index.html",
        About: "about.html",
        FAQ: "faq.html",
        Contact: "contact.html",
      };
    
    const navbarNavigation = document.createElement('nav');
    
    let navbarNavigationChildren = '<ul>';
    for (const [key, value] of Object.entries(menuItems)) {
      navbarNavigationChildren += `<li><a href="${value}">${key}</a></li>`;
    }
    navbarNavigationChildren += '</ul>';
    
    navbarNavigation.innerHTML = navbarNavigationChildren;
    document.appendChild(navbarNavigation);
    

    Which is much closer to how you'd approach the issue in PHP.

    However, my own experience is that as you get used to creating DOM Nodes and thinking in those terms, the approach where you build a string of markup and append it via .innerHTML loses quite a lot of its appeal.

    Although popular, the latter approach is something like building JSON via string concatenation and then converting that string into an object via JSON.parse(), rather than simply... building an object.