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