JSFiddle - React, Tailwind, and code Playground

HTML

<div id="output"></div>
<pre><code id="xml-input">
    <node begin="0" cat="top" end="11" id="0" rel="top">
        <node begin="0" cat="smain" end="10" id="1" rel="--">
            <node begin="0" cat="np" end="5" id="2" rel="su">
                <node begin="0" end="1" id="3" lemma="de" lwtype="bep" naamval="stan" npagr="rest" pos="det" postag="LID(bep,stan,rest)" pt="lid" rel="det" root="de" word="De"/>
                <node begin="1" end="2" genus="zijd" getal="ev" graad="basis" id="4" lemma="helft" naamval="stan" ntype="soort" pos="noun" postag="N(soort,ev,basis,zijd,stan)" pt="n" rel="hd" root="helft" word="helft"/>
                <node begin="2" cat="pp" end="5" id="5" rel="mod">
                    <node begin="2" end="3" id="6" lemma="van" pos="prep" postag="VZ(init)" pt="vz" rel="hd" root="van" vztype="init" word="van"/>
                    <node begin="3" cat="np" end="5" id="7" rel="obj1">
                        <node begin="3" buiging="met-e" end="4" id="8" lemma="al" naamval="stan" npagr="agr" pdtype="det" pos="det" positie="prenom" postag="VNW(onbep,det,stan,prenom,met-e,agr)" pt="vnw" rel="det" root="alle" vwtype="onbep" word="alle"/>
                        <node begin="4" buiging="met-e" end="5" getal-n="mv-n" graad="basis" id="9" lemma="werkloos" pos="adj" positie="nom" postag="ADJ(nom,basis,met-e,mv-n)" pt="adj" rel="hd" root="werkloos" word="werklozen"/>
                    </node>
                </node>
            </node>
            <node begin="5" end="6" id="10" lemma="zijn" pos="verb" postag="WW(pv,tgw,ev)" pt="ww" pvagr="ev" pvtijd="tgw" rel="hd" root="ben" word="is" wvorm="pv"/>
            <node begin="6" cat="ap" end="10" id="11" rel="predc">
                <node begin="6" buiging="zonder" end="7" graad="comp" id="12" lemma="jong" pos="adj" positie="vrij" postag="ADJ(vrij,comp,zonder)" pt="adj" rel="hd" root="jong" word="jonger"/>
                <node begin="7" cat="cp" end="10" id="13" rel="obcomp">
                    <node...

JavaScript

var xml = $("#xml-input").html(),
    xmlParsed = $.parseXML(xml),
    xmlObject = $(xmlParsed);

function output(nodes) {
    var newList = $("<ol>");
    nodes.each(function (x, e) {
        //console.log(e);
        var newLI = $("<li>");
        for (var i = 0, l = e.attributes.length, a=null; i < l; i++) {
            a = e.attributes[i];
            //console.log(e, a.nodeName, a.nodeValue);
            newLI.attr("data-"+a.nodeName, a.nodeValue);
          
        }
        newLI.append(output($(this).children('node')));
        newList.append(newLI);
    });
    return newList;
}

$("#output").append(output(xmlObject.children('node')));