javascript - データを解析してナビゲーション ペインを作成する

Question

この XML 応答があります: http://jsfiddle.net/ZeeHv/

ダンプからの情報を使用して、次のようなものを作成しようとしています。

<UL>
  <li>Academic
    <ul>
      <li>BM</li>
      <li>CMTTE</LI>
      <li>DM</li>
      <li>PM</li>
  </ul>
  </li>
</ul>
<ul>
  <li>ARCHIVE</li>
</UL>
<ul>
  <LI>ASSOCIATIONS
    <ul>
    <li>BM</li>
    <li>DM</LI>
    <li>PM</li>
    </ul>
  </LI>
</ul>

最終的に、XML はすべてのサイトとサブサイトのリストを提供します。

https://hosted.demo.ca 
https://hosted.demo.ca/academic
https://hosted.demo.ca/academic/bm 
https://hosted.demo.ca/academic/cmtte 
https://hosted.demo.ca/academic/dm 
https://hosted.demo.ca/academic/pm 
https://hosted.demo.ca/archive 
https://hosted.demo.ca/associations 
https://hosted.demo.ca/associations/bm 
https://hosted.demo.ca/associations/dm 
https://hosted.demo.ca/associations/pm 

この情報を調べて、ul タグと li タグを追加して、サイト ナビゲーション メニューを作成するにはどうすればよいですか?

XML の取得に使用される JS:

function getAllSites(){
  $().SPServices({
    operation: "GetAllSubWebCollection",
    async: true,
      completefunc: function(xData, Status){
      $(xData.responseXML).find("Web").each(function(){
      console.log($(this).attr("Url"));
      });
    }
  });
}