Though this is pretty rarely used scenario, I tried to create XML document using the DOMParser. Since JavaScript handles XML with ‘XML DOM objects’, you can create such an object by parsing a string containing serialized XML.

Below code is just a method that I implemented which returns the XML object:

getXMLString() {
    var parser = new DOMParser();
    var xml = "<?xml version=\"1.0\" standalone=\"yes\" ?>";
    xml = xml + "<PlanInfo UserId=\"" + this.props.UserId + "\" UpdatedBy=\"" + Number(localStorage.getItem("userId")) + "\" UpdatedOn=\"" + this.formatDate(new Date()) + "\"><Plans>";
    for(var i=0; i<15; i++) {
      xml = xml + "<Plan ID=\"" + this.props.myColl[i].dataId + "\" Comment=\"" + this.props.myColl[i].comment + "\" />";
    }
    xml = xml + "</Plans></PlanInfo>";
    var xmlDoc = parser.parseFromString(xml, "application/xml");
    return xmlDoc;
}

The above code is an implementation in ReactJS that reads the props from redux and loop through the data to create the XML. Please note that XML tag names are case-sensitive.

Below is the sample output:

<?xml version="1.0" standalone="yes" ?>
<PlanInfo UserId="234" UpdatedBy="123" UpdatedOn="13 May 2020">
    <Plans>
        <Plan ID="1" Comment="test comments"/>
	<Plan ID="2" Comment="test comments2"/>
....
    </Plans>
</PlanInfo>

When you have obtained an XML DOM object (e.g. xmlDoc above), you can use methods to manipulate it as shown below:

var node = xmlDoc.createElement("Plan");
var elem = xmlDoc.getElementsByTagName("Plans");
elem[0].appendChild(node);