Как обернуть div вокруг главного меню li?

Question

Я просто хочу обернуть div вокруг главного меню с подменю в шаблоне WordPress, как я могу достичь его, возможно, с помощью navwalker?

Мое меню:

<ul id="menu-1" class="menu">
  <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-38"><a href="http://localhost:88/wordpress/">menu1</a></li>
  <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-42"><a href="http://localhost:88/wordpress/category/projekte/">menu2</a>
    <ul class="sub-menu">
      <li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-69"><a href="http://localhost:88/wordpress/2018/04/24/projekt-1/">a</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-68"><a href="http://localhost:88/wordpress/2018/04/24/projekt-2/">b</a></li>
    </ul>
  </li>
</ul>

После упаковки он должен выглядеть следующим образом:

<ul id="menu-1" class="menu">
  <div class=wrap1 ">
    <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-38 "><a href="http://localhost:88/wordpress/ ">menu1</a></li>
    </div>
    <div class=wrap1">
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-42"><a href="http://localhost:88/wordpress/category/projekte/">menu2</a>
      <ul class="sub-menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-69"><a href="http://localhost:88/wordpress/2018/04/24/projekt-1/">a</a></li>
        <li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-68"><a href="http://localhost:88/wordpress/2018/04/24/projekt-2/">b</a></li>
      </ul>
    </li>
  </div>
</ul>

Answer 1

Может быть, это может помочь вам:

const menu1 = document.getElementById("menu-1").innerHTML;
const new_menu1 = "<div id='wrap1'>" + menu1 + "</div>";
document.getElementById("menu-1").innerHTML = new_menu1;

<ul id="menu-1" class="menu">
  <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-38"><a href="http://localhost:88/wordpress/">menu1</a></li>
  <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-42"><a href="http://localhost:88/wordpress/category/projekte/">menu2</a>
    <ul class="sub-menu">
      <li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-69"><a href="http://localhost:88/wordpress/2018/04/24/projekt-1/">a</a></li>
      <li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-68"><a href="http://localhost:88/wordpress/2018/04/24/projekt-2/">b</a></li>
    </ul>
  </li>
</ul>