How to display XML in a HTML page as a collapsible and expandable tree using Javascript?

Question

How to display a XML document in a HTML page as a collapsible and expandable tree?

I'd like to display a XML document inside a HTML page as a nicely pretty printed tree structure. I'd like to be able to expand and collapse tree branches. For example Firefox browser does this when you load a plain XML file.

Surely there is a some kind of open source Javascript library to do this? Syntax highlighting would be also nice.

Answer 1

http://ajaxian.com/archives/jstree-jquery-based-javascript-tree-component Here you can find a bunch of js libs with solutions

Answer 2

Creating An XML Viewer With JScript - Exsead XML Power Scripting

Display XML Files with Javascript

Hope they help.

Answer 3

This library does all the work for you:

http://www.openjsan.org/doc/k/ka/kawasaki/XML/ObjTree/0.24/lib/XML/ObjTree.html

var js = (new XML.ObjTree).parse("<?xml version="1.0"?><response><error>0</error></response>");

Then you have a JavaScript tree and you can display it however you want. You might want to try the YAHOO.widget.TreeView module for that it will create a "expandable and collapsible tree." That is if you like the YUI library, other wise there is Dojo and Ext libraries that can create a treeview for you.