Convert HTML Sidebar into JS Sidebar

Question

HTML

<nav id="sidebar">
  <div class="sidebar-header">
          <img src="Files/Logo.png" width="150px" height="150px">
          <h3>Name</h3>
  </div>

  <ul class="list-unstyled components">
      <p>Dummy Heading</p>

      <li class="active">
         <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
         <ul class="collapse list-unstyled" id="homeSubmenu">
           <li>
              <a href="#">Home 1</a>
           </li>
           <li>
              <a href="#">Home 2</a>
           </li>
           <li>
              <a href="#">Home 3</a>
           </li>
          </ul>
      </li>

  </ul>

</nav>

JS File

var myArray = [
  ["Site1.php", 0],
  ["Site2.php", 0],
  ["Site3.php", 0],
  ["Site4.php", 0],
  ["Site5.php", 0],
}

document.write(

'<button onclick="myAccFunc(1)"> Heading </button> '+

 ' <a href="'+myArray[0][0]+'" class="'+myArray[0][1]+'" > Website 1 </a> '+
 ' <a href="'+myArray[1][0]+'" class="'+myArray[1][1]+'" > Website 2 </a> '+
 ' <a href="'+myArray[2][0]+'" class="'+myArray[2][1]+'" > Website 3 </a> '+
 ' <a href="'+myArray[3][0]+'" class="'+myArray[3][1]+'" > Website 4 </a> '+
 ' <a href="'+myArray[4][0]+'" class="'+myArray[4][1]+'" > Website 5 </a> '+
'</div>'

);

The JS File was my SideBar menu and i had to move some code around to make the Site Mobile Friendly. Now my present code is the HTML Code. How do i create a JS File for that Nav Menu just like the one i had before because i can't put Sidenav code in HTML because i have a lot of menus? I just want to remove nav code from HTML and put it in a JS File with an array of sites and include that JS File in my HTML Page

EDIT

<nav id="sidebar">
  <script src="NAV.js">
      createSidebar(document.getElementById("sidebar"))
  </script>
</nav>

NAV

var myArray = [

  ["Site1.php", 0],
  ["Site2.php", 0],
  ["Site3.php", 0],
  ["Site4.php", 0],
  ["Site5.php", 0],
];


function createSidebar(/* DOMElement */ container) {
  var nav = document.createElement("nav");
  nav.setAttribute("id", "sidebar");
  nav.append(createSidebarHeader(), /* <div class="sidebar-header">... 
</div> */
createSidebarMenu()); /* <ul>...</ul> */
container.append(nav);
}

function createSidebarMenu() {
  var list = document.createElement("ul");
  list.setAttribute("class", "collapse list-unstyled");
  list.setAttribute("id", "homeSubmenu");
  for (var link of navlinks) {
    var li = list.appendChild(document.createElement("li"));
    var a = li.appendChild(document.createElement("a"));
    a.setAttribute("href", "#");
    a.append(link);
  }
  return list;
}

Answer 1

Your old Javascript file has 1 serious problem - you are using document.write() which is a big no-no in current web practice: it must be run before the document is ready - otherwise, it will overwrite all the other content - and even if used right it causes a major slowdown as the browser has to reinterpret the entire document multiple times.

You probably want to convert your old Javascript code and the new HTML code to DOM editing using the DOM API.

It might looks something like this (this is not a full example, I'm making a very simplified sidebar):

var navlinks = [
  ["Site1.php", 0],
  ["Site2.php", 0],
  ["Site3.php", 0],
  ["Site4.php", 0],
  ["Site5.php", 0],
];

function createSidebar(/* DOMElement */ container) {
  var nav = document.createElement("nav");
  nav.setAttribute("id", "sidebar");
  nav.append(createSidebarHeader(), /* <div class="sidebar-header">...</div> */
             createSidebarMenu()); /* <ul>...</ul> */
  container.append(nav);
}

function createSidebarMenu() {
  var list = document.createElement("ul");
  list.setAttribute("class", "collapse list-unstyled");
  list.setAttribute("id", "homeSubmenu");
  for (var link of navlinks) {
    var li = list.appendChild(document.createElement("li"));
    var a = li.appendChild(document.createElement("a"));
    a.setAttribute("href", "#");
    a.append(link);
  }
  return list;
}

Then from your main document, after loading the Javascript file, you can have a "container" for your sidebar (let's say - a <div id="sidebar-holder"> ) and call createSidebar(document.getElementById("sidebar-holder")) .

There are various Javascript frameworks that will help with the tedious job of creating HTML elements using the DOM API - Google for them or sth.