Javascript XML Traversal

[metta123]

<?xml version="1.0" encoding="utf-8" ?>
<sites id="0">
  <siteName>London
     <groupName>Administration</groupName>
     <groupName>IT 
         <groupName>IT Sales</groupName>
         <groupName>Helpdesk</groupName>
     </groupName>
  </siteName>
</sites>

Above is just a sample snippet to highlight what I am trying to achieve. Basically I just want to have a way to traverse this. But with <divs> attached to each level with an onclick event which will display children of clicked node.

For example: London would be the element displayed, when clicked it will be overwritten with its childNodes in this case Administration & IT. When IT is clicked the childNodes IT Sales and Helpdesk will be displayed.

I would be really grateful for any advise that anyone can give on the best approach for this. I have looked into xslt and javascript although unable to reach desired outcome. I can achieve this using C#, though really needs to be on clientside. Thank you.

[serkan sendur]

this link has all the methods you need :
http://www.adp-gmbh.ch/web/js/msxmldom/methods_properties.html
create an msxmldom object then load your xml file, then select the nodes and assign them to innerHTML of your divs, the rest is simple javascript. i can give the details if this information does not suffice.

[metta123]

I am having alot of difficulty with this. This is the sort of thing I mean. I always have such difficulty with recursion. I hope this is clear, thank you for your time.

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
function initTraverse() {
    xmlDoc.async = "false";
    xmlDoc.load('MyTester.xml');
    var xmlObj = xmlDoc.documentElement;

    traverse(xmlObj);
}



function traverse(myObj) {
    var structureOutput = "<div>";
    for (var i = 0; i < myObj.childNodes.length; ++i) {
        structureOutput +=
                       "<div>" +
                            "<div onclick=traverse('" + myObj.childNodes[i] + "')>" + myObj.childNodes[i].firstChild.data + "</div>" +                         
                    "</div>";
    }
    "</div>";

    document.getElementById('structureContainer').innerHTML = structureOutput;
}

[metta123]

I have something like this:

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
function initTraverse() {
    xmlDoc.async = "false";
    xmlDoc.load('MyTester.xml');
    var xmlObj = xmlDoc.documentElement;

    traverse(xmlObj);
}

function traverse(tree) {
    if (tree.hasChildNodes()) {
        for (var i = 0; i < tree.childNodes.length; i++) {
            //traverse(tree.childNodes(i));
            document.write("<div onclick=traverse(" + tree.childNodes[i] + ")>" + tree.childNodes(i).firstChild.data + "</div><br />");
        } 
    }
}

I just cannot fathom how to do this. Anyone have any ideas on what I am doing wrong or the best approach to take to resolving this.