Конвертировать HTML Боковую панель в JS Боковую панель

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 Файл

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>'

);

Файл JS был моим меню на боковой панели, и мне пришлось переместиться некоторый код вокруг, чтобы сделать сайт мобильным. Теперь мой настоящий код - HTML Код. Как мне создать файл JS для этого навигационного меню точно так же, как у меня раньше, потому что я не могу поместить код Sidenav в HTML, потому что у меня много меню? Я просто хочу удалить код навигации из HTML и поместить его в файл JS с массивом сайтов и включить этот файл JS в мою HTML страницу

РЕДАКТИРОВАТЬ

<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

У вашего старого файла Javascript есть 1 серьезная проблема - вы используете document.write(), что является серьезным запретом в современной веб-практике: его нужно запустить до того, как документ будет готов - в противном случае он перезапишет все остальные содержимого - и даже при правильном использовании это приводит к значительному замедлению, так как браузеру приходится переинтерпретировать весь документ несколько раз.

Возможно, вы захотите преобразовать свой старый код Javascript и новый код HTML в DOM редактирование с использованием DOM API.

Это может выглядеть примерно так (это не полный пример, я делаю очень упрощенную боковую панель):

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

Затем из вашего основного документа, после загрузки файла Javascript, вы можете создать «контейнер» для боковой панели (скажем, <div id="sidebar-holder">) и вызвать createSidebar(document.getElementById("sidebar-holder")).

Существуют различные Javascript фреймворки, которые помогут в утомительной работе по созданию HTML элементов с использованием DOM API - Google для них или sth.