Creating Unordered List with XML

Question

I need some help on JavaScript, I have created a XML file, which i tried to display all the node names with JavaScript, and now i am trying it to display it in an unordered list in the following manner as shown below, and all these needs to done with JavaScript not jquery. I am attaching live fiddle

Fiddle

bookstore 
   |
   |__book 
   |    |_____title
   |    |_____author
   |    |_____year
   |    |_____price
   |
   |__book 
   |
   |__book 
   |
   |__book  

---

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
    <book category="cooking">
        <title lang="en">Everyday Italian</title>
        <author>Giada De Laurentiis</author>
        <year>2005</year>
        <price>30.00</price>
    </book>
    <book category="children">
        <title lang="en">Harry Potter</title>
        <author>J K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
    <book category="web">
        <title lang="en">XQuery Kick Start</title>
        <author>James McGovern</author>
        <author>Per Bothner</author>
        <author>Kurt Cagle</author>
        <author>James Linn</author>
        <author>Vaidyanathan Nagarajan</author>
        <year>2003</year>
        <price>49.99</price>
    </book>
    <book category="web" cover="paperback">
        <title lang="en">Learning XML</title>
        <author>Erik T. Ray</author>
        <year>2003</year>
        <price>39.95</price>
    </book>
</bookstore>

---

Thank you

Answer 1

This is a simple logic. For every node, you have to generate:

html = "<li>"+node.nodeName;

if node has childNodes (consider only element node types not text etc) then

html += "<ul>"
html += html from recursive calls for every childNode
html += "</ul>"

finally close li tag

html += "</li>

Alternatively, you could also generate html for all element childNodes and append to parent html if required.

Check your updated fiddle: http://jsfiddle.net/32eVr/7/