Creating html ul li from nested xml element using jquery
===

I have an xml as -

    <item name="a">
       <item name="d">
          <item name="g">
              ...
          </item>
          ...
       </item>
       <item name="e"></item>
       <item name="f"></item>
       ...
    </item>
    <item name="b"></item>
    <item name="c"></item>

I want to create a ul li tree structure of this xml as

    a [node]
     d [node]
      g [node]
      .
      .
      .
     e [node]
     f [node]
     .
     .
    b [node]
    c [node]

I guess I would need to make a infinte loop, but finding it difficult to do it in jquery. My jquery would resemble somewhat like this -

    function createNestedTree(obj) {
      $("#tree").append("<ul></ul>");
      $(obj).children("item").each(function(){
        $("#tree ul").append("<li>"+$(this).attr("name")+"</li><ul id="+$(this).attr("name")+"level></ul>");
        $(this).children("item").each(function(){
           //logic here
        });
      });
    }

Any help is greatly appreciated.