append <li> to <ul> using JQuery

i am trying to create a nested ul by reading values from XML file. I am able to create first level ul but not able to add li elements under that. Firebug is not displaying any error. Please help code is given below;

$(function(){
    $.get("../XML/test.xml",processResult); 
});

function processResult(data){
    $(data).find("Category").each(showCategory);
}

function showCategory(){
    var catName = $(this).attr("Title");
    $("#menuList").app开发者_JAVA技巧end("<ul>" + catName + "</ul>");
    $(this).find("Function").each(showFunction);
}

function showFunction(){
    var funcName = $(this).attr("Title");
    $(this.parentNode).append("<li>" + funcName + "</li>");
}

You are putting text directly inside a <ul> element, and using the wrong this variable. Try something like this:

$(function(){
    $.get("../XML/test.xml",processResult); 
});

function processResult(data){
    $(data).find("Category").each(showCategory);
}

function showCategory(){
    var catName = $(this).attr("Title");
    var parent = $("<ul></ul>");
    $(this).find("Function").each(function(){
      var funcName = $(this).attr("Title");
      parent.append("<li>" + funcName + "</li>");
    });
    $("#menuList").append(catName).append(parent);
}

Let me know if it works. If you have sample data available it will be easier to verify that it functions correctly.