Menu
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. I am looking how to do this in client-side with JavaScript.
580
Since XML tags are "invented" by the author of the XML document, browsers do not know if a tag like <table> describes an HTML table or a dining table. Without any information about how to display the data, the browsers can just display the XML document as it is. Tip: If you want to style an XML document, use XSLT.
Open the XML file's location, then click and drag the file onto the browser window and drop the file there. Review the results. Dragging and dropping your XML file into the browser will prompt the browser to display the XML file's code in a "tree" view.
With a few lines of JavaScript code, you can read an XML file and update the data content of any HTML page.
It forms a tree structure which is referred as an XML tree. The tree structure makes easy to describe an XML document. A tree structure contains root element (as parent), child element and so on. It is very easy to traverse all succeeding branches and sub-branches and leaf nodes starting from the root.
Creating An XML Viewer With JScript - Exsead XML Power Scripting
Display XML Files with Javascript
There seems to be a better and easier-to-use alternative than what I listed above many years ago:
https://www.jstree.com/
Hope they help.
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
