XML : Navigation menu from xml with javascript recursion to HTML

I have my XML like this:

  <MenuRoot>  <menu0>Home</menu0>  <menu0 submenu="true"><name>About</name>      <menu1>History</menu1>      <menu1 submenu="true"><name>Within 40 years..</name>          <menu2 submenu="true"><name>Where we are today</name>              <menu3 submenu="true"><name>Vision of tomorrow</name>                  <menu4>Vision and Mission</menu4>              </menu3>          </menu2>          <menu2>Gallery</menu2>          <menu2>Contact Us</menu2>      </menu1>  </menu0>  <menu0>About</menu0>  </MenuRoot>    

And I am using this recursion code to load it:

  $(document).ready(function()   {       $.ajax({           type: "GET",           url: "/static/menu_.xml",           dataType: "xml",           success: function(xml) {           html = nodeMarkup(xml.documentElement);           document.getElementById('menulist').innerHTML = html;}           })   });    function nodeMarkup( node ){      if( node.childNodes.length ) {          var list = '', header = '';          for( var index = 0; index < node.childNodes.length; index++ ) {              if( node.childNodes[index].tagName == 'name' ) {                  header = node.childNodes[index].textContent;              } else {                  list += nodeMarkup( node.childNodes[index] );              };          };          return node.hasAttribute('submenu')              ? '<li>' + header + '<ul>' + list + '</ul></li>'              : list;      } else {          return '<li>' + node.textContent + '</li>';      };  };    

I got this recursion code in here and modified the part where it loads the XML. However, I got different results when I load the XML through ajax. the output is this:

  <ul id="menulist"><li>  </li><li>Home<ul></ul></li><li>  </li><li>About<ul><li>      </li><li>History</li><li>      </li><li>Within 40 years..<ul><li>          </li><li>Where we are today<ul><li>              </li><li>Vision of tomorrow<ul><li>                  </li><li>Vision and Mission</li><li>              </li></ul></li><li>          </li></ul></li><li>          </li><li>Gallery</li><li>          </li><li>Contact Us</li><li>      </li></ul></li><li>  </li></ul></li><li>  </li><li>About</li><li>  </li></ul>  

But when I manually add the XML through a variable, it loads correctly like this, just how I want:

  <ul id="menulist">    <li>Home</li>    <li>About      <ul>        <li>History</li>        <li>Within 40 years..          <ul>            <li>Where we are today              <ul>                <li>Vision of tomorrow                  <ul>                    <li>Vision and Mission</li>                  </ul>                </li>              </ul>            </li>            <li>Gallery</li>            <li>Contact Us</li>          </ul>        </li>      </ul>    </li>    <li>About</li>  </ul>  

Can anybody help me with this? Thank you in advance and I will appreciate any suggestions and comments