JSFiddle - React, Tailwind, and code Playground

by Parvez Ali

CSS

li.selected ul {
    display: none
} 

ul span:hover {
    cursor: pointer
}

JavaScript

var txt = '<?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>';

function compare(a,b) {
  if (a.name < b.name)
     return -1;
  if (a.name > b.name)
    return 1;
  return 0;
}

function parse(node) {
    if (node.nodeType != 1) return null;
    var result = {name: node.nodeName};
//	alert(node.nodeName);
    var children = [];
    for (var i = 0; i < node.childNodes.length; i++) {
        var child = parse(node.childNodes[i]);
        if (child)
        {
            children.push(child);
        }
    }
    
    // sort children
    children.sort(compare);
	
    
    // store them
    result.children = children;
    return result;
}

var Objectkeys = function(obj){
        a = []
        for(var prop in obj){
            if (obj.hasOwnProperty(prop)) {
             a.push(prop);
            }
        };
        return a;
    };

function generate(obj){
//	alert((obj[prop])+": "+typeof(obj));
	var ul = document.createElement("ul"),
        li,span;
    for (var prop in obj){
		li = document.createElement("li");
		li.appendChild(document.createTextNode(obj[prop]));
		li.onclick =...