使用jQuery在li中添加ul

Question

如何使用jQuery实现此目的？

<ul> 
    <li>Home</li> 
    <li>About 
     <ul> 
      <li>About1</li> 
      <li>About1</li> 
     </ul> 
    </li> 
</ul> 

我的代码

function createMenuBar(mainMenuList) { 

    for(var l = 0; l < mainMenuList.length; l++) { 
    var item = mainMenuList[l]; 

    if(item) { 
     var mainItem = $("<li></li>"); 
     var mainItemLink = $("<a></a>", { 
      href : item.Url, 
      text : item.Title 
     }); 

     mainItem.append(mainItemLink);   
     if(item.SubMenus.length) { 
      var subMenu = getSubMenu(item.SubMenus); 

      mainItem.append(subMenu); 
     } 

     $('#masterMenu ul').append(mainItem); 
    } 
    } 
} 


function getSubMenu(submenuList){ 
    var subMenuUl = $("<ul></ul>"); 

    for(var i = 0 ; i < submenuList.length; i++) { 
     var subMenuItem = $("<li></li>"); 
     var subMenuItemLink = $("<a></a>", { 
      href : submenuList[i].Url, 
      text : submenuList[i].Title 
     }); 

     subMenuItem.append(subMenuItemLink); 
     subMenuUl.append(subMenuItem); 
    } 

    return subMenuUl; 
} 

Answer 1

宥可以尝试使用append方法。

$('ul.my-ul li.in-this-li').append('<ul><li></li><li></li></ul>'); 

Answer 2

这里是关于工作如何追加的大文档http://api.jquery.com/append/。

我的例子：

$(function() { 
 
    var ulToApppend = $('.append-ul'); 
 
    $('.append-li').append(ulToApppend); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
 
<ul class='main-ul'> 
 
    <li class='append-li'>1 li</li> 
 
    <li>2 li</li> 
 
    <li>3 li</li> 
 
</ul> 
 

 

 
<ul class='append-ul'> 
 
    <li>10 li</li> 
 
    <li>20 li</li> 
 
    <li>30 li</li> 
 
</ul>