How to write an XML file with certain format using JS?

I am trying to write an XML document from an HTML form using JavaScript with the following function:

JavaScript function:

function formToXml(form){
    var xmldata=['<?xml version="1.0" encoding="UTF-8"?>'];
    const elNames = ["author", "title"];
    xmldata.push("<book>");
    var inputs=form.elements;
    for(var i=0;i<inputs.length;i++){
        var el=document.createElement(elNames[i]);
        if (inputs[i].name){
            el.set("name",inputs[i].name);
            el.setAttribute("value",inputs[i].value);
            xmldata.push(el.outerHTML);
        }
    }
    xmldata.push("</book>");
    return xmldata.join("n");
}

The file that is generated has the following format:

<?xml version="1.0" encoding="UTF-8"?>
<book>
   <author value="Something" name="author"/>
   <title value="Something" name="title"/>
</book>

I am trying to modify the method in order for the nodes to have the following format:

   <author>Something</author>
   <title>Something</title>

I know that setAttribute() doesn’t work because it makes an attribute in the node. I can’t find a function that sets the value like the example above.

Any suggestions?

Answer

You can use the innerHTML attribute on the element to set the value.

function formToXml(form) {
  var xmldata = ['<?xml version="1.0" encoding="UTF-8"?>'];
  const elNames = ["author", "title"];
  xmldata.push("<book>");
  var inputs = form.elements;
  for (var i = 0; i < inputs.length; i++) {
    var el = document.createElement(elNames[i]);
    if (inputs[i].name) {
      el.innerHTML = inputs[i].value; // Set the innerHTML of the element
      xmldata.push(el.outerHTML);
    }
  }
  xmldata.push("</book>");
  return xmldata.join("n");
}

Example output:

<?xml version="1.0" encoding="UTF-8"?>
<book>
  <author>Robert Louis Stevenson</author>
  <title>Treasure Island</title>
</book>