Build an XML-based Tree Control with JavaScript

fter writing the Build an Object-Oriented Tree Control Using JavaScript article, it occurred to me that using XML as the data source for the tree would be a natural fit. I wanted to create a solution that was both maintainable and extensible. That is, I wanted to create an automated system whereby any XML document that adhered to a given grammar would easily become an HTML tree control. Essentially, I wanted to be able to view the XML document in a browser and have the browser render it as a tree similar to the TreeView control in Windows Explorer. Further, the same control should work in both Internet Explorer 6 (IE) and Netscape/Mozilla (N7).

Tree controls provide a hierarchical view of data and XML provides a way to structure data hierarchically, so it would seem that viewing XML data as a tree structure would be a natural fit. The problem is, how can you build an HTML tree control that uses XML for its data model?


The solution is to brew a mix of XML, XSLT, JavaScript, and CSS to produce an extensible HTML tree control.