JSFiddle - React, Tailwind, and code Playground
CSS
li.selected ul {
display: none
}
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>';
// compare function for sorting
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};
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;
}
// needs to be updated
function generate(node) {
if (node.nodeType != 1) return "";
var html = "<li>" + node.nodeName;
var htmlForChildNodes = "";
for (var i = 0; i < node.childNodes.length; i++) {
htmlForChildNodes += generate(node.childNodes[i]);
}
if (htmlForChildNodes) {
html += "<ul>" + htmlForChildNodes + "</ul>";
}
html += "</li>";
return html;
}
if (window.DOMParser) {
parser = new...