JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table" border="1" cellpadding="20" style="text-align:center;" width="300px" rowHeight="30px">
    <tbody>
        <tr>
            <th>Name/Tag</th>
            <th>Value/Text</th>
        </tr>
        <tr id="toAppend">
            <td id="nameTag"></td>
            <td id="valueText"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

JavaScript

var xml = $.parseXML('<dummyRoot id="dummyAttribute">simple text</dummyRoot>');

console.log(xml.nodeName);
console.log(xml.nodeValue);
console.log(xml.tagName);

if (xml.nodeName === "#document") {
    var xml = xml.childNodes[0];

    console.log("0 : " + xml.nodeName);
    console.log(xml.nodeValue);
    console.log(xml.tagName);


    if (xml.nodeName !== "#text") {
        $('#nameTag').html(xml.tagName);
        $('#valueText').html(xml.nodeValue);

        for (var loopIndex = 0; loopIndex < xml.attributes.length; loopIndex++) {
            $('<tr><td>' + xml.attributes[loopIndex].nodeName + '</td><td>' + xml.attributes[loopIndex].nodeValue + '</td></tr>').insertAfter('#toAppend');
        }

    }
}