JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="go" onclick="getServerData()" value="Shoot me"/>
<div id="text" style="float:left; clear:left; width:650px; margin-top:10px"></div>
<div id="test"></div>

JavaScript

var firefoxFlag = false;
    var XMLHttpRequestObject = false;
	var menuList = "";
	if (window.XMLHttpRequest) {
	   XMLHttpRequestObject = new XMLHttpRequest();
	   XMLHttpRequestObject.overrideMimeType("text/xml");
	} 
	else if (window.ActiveXObject) {
	   XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
	}
	function getServerData()
	{
		var dataOutput=document.getElementById("text");
		var testOutput=document.getElementById("test");
	   if(XMLHttpRequestObject) 
	   {
		   XMLHttpRequestObject.open("GET", "DDM.xml");
		   XMLHttpRequestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		   XMLHttpRequestObject.onreadystatechange =function(){
				if (XMLHttpRequestObject.readyState ==4 && XMLHttpRequestObject.status == 200) 
				{
					var parentNode = XMLHttpRequestObject.responseXML;
					menuList = outputTags(parentNode);
					testOutput.innerHTML = menuList;
				}
			}
			XMLHttpRequestObject.send(null);
		}
	}
	function outputTags(xmlData){
		var index;
		var markup = "";
		var menus = xmlData.documentElement.childNodes;
		var numberOfMenuItems = menus.length;
		
	
	alert(menus);
	markup += "<ul>";
		for (index = 0; index < numberOfMenuItems; index++){
			markup += "<li>";
			var currentNode = xmlData.childNodes[index]; 
			var attributes = xmlData.attributes;

			markup =+ "<ul>";
            
            
			//list of links HERE goes the child node values
            
            
            
            
			markup =+ "</ul>";
			markup += "<li>";
		}
	markup += "</ul>";
		return markup;
	}