Nesting "for of" inside of a "forEach" I am new to JavaScript so I am not sure if it's bad practice to nest a for loops inside of each other.

This script simply takes a WordPress HTML menu and restructures it into a format better suited to my requirements. 

Below you can see the original HTML, the JS and the new HTML output by the JS.

The nested "for of" loop checks the deepest anchor tags to see if the href matched the window and gives it a "is-active" class if it does. Should this "for of" loop be in its own function or is the nesting okay?

Is there a better way to write the JS?

Original HTML:

&lt;aside class="menu"&gt;
  &lt;ul class="menu-list"&gt;
    &lt;li class="menu-label"&gt;
      &lt;a&gt;Label 1&lt;/a&gt;
      &lt;ul class="sub-menu"&gt;
        &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;

    &lt;li class="menu-label"&gt;
      &lt;a&gt;Label 2&lt;/a&gt;
      &lt;ul class="sub-menu"&gt;
        &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/aside&gt;


JS

const menuWrapper = document.querySelector(`aside.menu`);
const badMenu = document.querySelector(`.menu-list`);
const badMenuItems = document.querySelectorAll(`.menu-label`);

function fixMenus(menu, items) {
  // Remove old menu
  menu.remove();
  let fixedMenu = ``;

  // Iterate through and build new menu
    items.forEach(x =&gt; {
        const labels = x.children[0].innerHTML;
    const subMenus = x.children[1];
    const subItems = x.children[1].children;

    //Set "is-active" to anchor tag
    for (let i of subItems) {
      if (i.firstElementChild.href === window.location.href) {
        i.firstElementChild.classList.add(`is-active`)
      }
    }

    //Build new menu
        fixedMenu += `
      &lt;p class="menu-label"&gt;${labels}&lt;/p&gt;
      &lt;ul class="menu-list"&gt;
        ${subMenus.innerHTML}
      &lt;/ul&gt;
    `;
  });

  return fixedMenu;
}

const sideMenus = fixMenus(badMenu, badMenuItems);
menuWrapper.insertAdjacentHTML(`beforeend`, sideMenus);


NEW HTML (rebuild, returned from the JS)

&lt;aside class="menu"&gt;
  &lt;p class="menu-label"&gt;Label 1&lt;/p&gt;
  &lt;ul class="menu-list"&gt;
    &lt;li&gt;&lt;a class="is-active" href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul &gt;

  &lt;p class="menu-label"&gt;Label 2&lt;/p&gt;
  &lt;ul class="menu-list"&gt;
    &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul &gt;
&lt;/aside&gt;
Is there a better way to write the JS?

Yes there is.
First off, lets face it, your function fixMenus looks quite complex and a double for loop in one function is usually a big &quot;no no&quot; sign. Any company with a coding standard would want this to be different.
You have a double for loop with some conditions and some HTML building. That's a lot for one function and it looks hard to test accurately.
Your function does the following things

Loops through each menu
Destructures some data
Loops through a sublist to apply a class
Applies the new menu to the variable

So instead of having one function handle all this, let's break it up.
Make small simple functions that are easy to test
The concept of Test Driven Development (TDD) forces you to write code that is:

Easy to understand
Easy to test

This by itself already forces you to write better code and smaller functions.
You're probably not doing TDD, but writing code as if you were is already a great step!
Focus on the simple tasks

fixMenus should call generateMenus and ultimately generateMenu
Use Array#map and Array#join instead of forEach
create a function to update the actives
create a function to generate your html string

function updateActives(subItems){
   for (let i of subItems) {
      if (i.firstElementChild.href === window.location.href) {
        i.firstElementChild.classList.add(`is-active`);
      }
   }
}

function createMenu(labels, subMenus){
  return `
    &lt;p class=&quot;menu-label&quot;&gt;${labels}&lt;/p&gt;
    &lt;ul class=&quot;menu-list&quot;&gt;
       ${subMenus}
    &lt;/ul&gt;
  `
}

function generateMenu(item){
  const {children:[elem1, elem2]} = item;
  updateActives(elem2.children);
  return createMenu(elem1.innerHTML, elem2.innerHTML);
}

function generateMenus(items){
  return items.map(item =&gt; generateMenu(item)).join(&quot;&quot;);
}

function fixMenus(menu, items){
  menu.remove();
  return generateMenus(items);
}