JSFiddle - React, Tailwind, and code Playground

by salt

HTML

<ul class="menu">
  <li><a class="haschild" title="" href="#0">Home</a>
    <ul class="sub-menu">
      <li><a class="haschild" title="" href="#1">sub</a>
        <ul>
          <li><a title="" href="#11">Sub sub 1</a></li>
          <li><a title="" href="#22">Sub sub 2</a></li>
          <li><a title="" href="#33">Sub sub 3</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<input type="submit" onclick="editMenu()" value="Edit"/>
<input type="submit" onclick="textMenu()" value="Show menu"/>

JavaScript

function editMenu() {
    menu = '<ul class="menuTemp"></ul>';
    $('body').append(menu);
    $('.menu li').each(function() {
        var link = $('a', this).first().attr('href');
        var text = $('a', this).first().text();
        if ($(this).has('a.haschild').length) {
            var li = '<li><input class="haschild1" value="' + text + '" name="' + link + '"></li>';
        } else {
            var li = '<li><input value="' + text + '" name="' + link + '" ></li>';
        }
        $(li).appendTo('.menuTemp');
    });
    $("ul.menu").remove();
    $("ul.menuTemp").addClass("menu").removeClass("menuTemp");
}

function textMenu() {
    menu = '<ul class="menuTemp"></ul>';
    $('body').append(menu);
    $('.menu li').each(function() {
        var link = $('input', this).first().attr('name');
        var text = $('input', this).first().val();
        if ($(this).has('a.haschild').length) {
            var li = '<li><a title class="haschild1"  href="' + link + '">' + text + '</li>';
        } else {
            var li = '<li><a title  href="' + link + '">' + text + '</li>';
        }
        $(li).appendTo('.menu1');
    });
    $("ul.menu").remove();
    $("ul.menuTemp").addClass("menu").removeClass("menuTemp");
}