如何通过javascript在列表项中创建subemenu项作为ul？

我正在尝试从JSON中获取列表项并创建该菜单项。现在，我得到了菜单项，但不能设法使它应该是。我得到的所有项目都是列表项

<ul id="demo"></ul>
<script>
  var text, i, j, t, x = "";

  var text = dmAPI.getNavItems();

  for (i in text) {

    if (text[i].inNavigation === true ) {
      x += '<li><a href="'+text[i].path+'">' + text[i].title + '</a>'

      if ( 'subNav' in text[i] ) {
        for (j in text[i].subNav) {
          x+='<li class="submenuitem"><a href="'+text[i].subNav[j].path +'">' + text[i].subNav[j].title + '</a>'

          for ( t in text[i].subNav[j].subNav) {
            x+='<li class="sub_submenuitem"><a href="'+text[i].subNav[j].subNav[t].path +'">' + text[i].subNav[j].subNav[t].title + '</a></li>';
          }

          '</li>';
        }

      }

      '</li>';
    } //end if

  }// end for

  document.getElementById("demo").innerHTML = x;  
<script>

变量文本，i，j，t，x=“”；
var text=dmAPI.getNavItems（）；
（我在文中）{
if（文本[i]。导航===真）{
x+='
'
if（[i]文本中的“subNav”）{
对于（文本[i]中的j.subNav）{
x+='
'
对于（文本[i].subNav[j].subNav中的t）{
x+='
；
}
“”；
}
}
“”；
}//如果结束，则结束
}//结束
document.getElementById（“demo”）.innerHTML=x；

现在这个代码输出如下

<ul id="demo">
  <li><a href="#">New Page</a></li>
  <li class="submenuitem"><a href="#">New Page</a></li>
  <li class="sub_submenuitem"><a href="#">New Page</a></li>
  <li class="sub_submenuitem"><a href="#">New Page</a></li>
  <li><a href="#">Features</a></li>
</ul>

但我想要这样的输出

<ul id="demo">
  <li>
    <a href="#">New Page</a>
    <ul>
      <li class="submenuitem">
        <a href="#">New Page</a>
        <ul>
          <li class="sub_submenuitem"><a href="#">New Page</a></li>
          <li class="sub_submenuitem"><a href="#">New Page</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Features</a></li>
</ul>

我如何才能做到这一点？

请使用下面的代码

<script>
var text, i, j, t, x = "";

var text = dmAPI.getNavItems();

for (i in text) {

if (text[i].inNavigation === true ) {
    x += '<li><a href="'+text[i].path+'">' + text[i].title + '</a>'
    x +='<ul>';
    if ( 'subNav' in text[i] ) {
        for (j in text[i].subNav) {
        x+='<li class="submenuitem"><a href="'+text[i].subNav[j].path +'">' + text[i].subNav[j].title + '</a>'

        for ( t in text[i].subNav[j].subNav) {
        x+='<li class="sub_submenuitem"><a href="'+text[i].subNav[j].subNav[t].path +'">' + text[i].subNav[j].subNav[t].title + '</a></li>';
    }

         x+='</li>';
    }

    }
    x +='</ul>';
    x +='</li>';
} //end if

}// end for

document.getElementById("demo").innerHTML = x;

<script>

变量文本，i，j，t，x=“”；
var text=dmAPI.getNavItems（）；
（我在文中）{
if（文本[i]。导航===真）{
x+='
'
x+='
'；
if（[i]文本中的“subNav”）{
对于（文本[i]中的j.subNav）{
x+='
'
对于（文本[i].subNav[j].subNav中的t）{
x+='
；
}
x+=''；
}
}
x+='
'；
x+='
'；
}//如果结束，则结束
}//结束
document.getElementById（“demo”）.innerHTML=x；

只需在需要的地方添加内部ul元素即可

<ul id="demo"></ul>
<script>
var text, i, j, t, x = "";

var text = dmAPI.getNavItems();

for (i in text) {

if (text[i].inNavigation === true ) {
    x += '<li><a href="'+text[i].path+'">' + text[i].title + '</a>'

    if ( 'subNav' in text[i] ) {
        for (j in text[i].subNav) {

        x+='<li class="submenuitem"><a href="'+text[i].subNav[j].path +'">' + 
text[i].subNav[j].title + '</a>'

        for ( t in text[i].subNav[j].subNav) {
        x+='<ul>' //<--this
        x+='<li class="sub_submenuitem"><a href="'+text[i].subNav[j].subNav[t].path 
        +'">' + text[i].subNav[j].subNav[t].title + '</a></li>';
        x+='</ul>' //<--and this
      }

        '</li>';
    }

    }

   '</li>';
} //end if

}// end for

document.getElementById("demo").innerHTML = x;

<script>

变量文本，i，j，t，x=“”；
var text=dmAPI.getNavItems（）；
（我在文中）{
if（文本[i]。导航===真）{
x+='
'
if（[i]文本中的“subNav”）{
对于（文本[i]中的j.subNav）{
x+='
'
对于（文本[i].subNav[j].subNav中的t）{
x+='
'//jQuery不够