xml format getting changed while serializing

We are tyring to work on this xml in ie11 browser .

<script id="Customer" type="application/xml">
    <form id="customer">
    <firstname></firstname>
    <middlename></middlename>
    <lastname></lastname>
    </form>

</script>

we are trying to set atttrbute for the node.

    var parser = new DOMParser();
    var fieldID = "firstname";
    var formID = "Customer";
    doc = parser.parseFromString(document.getElementById(formID).innerHTML, "application/xml");


    x=doc.getElementsByTagName(fieldID);



    for(i=0;i<x.length;i++)
    {


        doc.getElementsByTagName(fieldID)[i].setAttribute(attrName,value);


        document.getElementById(formID).innerHTML  = new XMLSerializer().serializeToString(doc);


    }

We are able to set the attribute value ... but when serializing the node and saving it to innerHTML, the xml tags which are empty are getting changed to the following format.

Please help to convert this

<firstname />
<middlename attr="value"></middlename>
<lastname />

to

<firstname></firstname>
<middlename attr="value"></middlename>
<lastname></lastname>