I'm trying to create the following element nodetree:

<v:custProps>
    <v:cp v:nameU="Cost">
</v:custProps>

with:

newCustprop = document.createElement("v:custProps");
newcp = document.createElement("v:cp");
newcp.setAttribute("v:nameU", "Cost");
newCustprop.appendChild(newcp);

However, document.createElement("v:custProps") generates <v:custprops> as opposed to <v:custProps>. Is there anyway to escape this parsing?

Edit 1:

I'm currently reading this article on nodename case sensitivity. It's slightly irrelevant to my problem though because my code is unparsed with <![CDATA]]> and I'd rather not use .innerHTML.

I'm trying to create the following element nodetree:

<v:custProps>
    <v:cp v:nameU="Cost">
</v:custProps>

with:

newCustprop = document.createElement("v:custProps");
newcp = document.createElement("v:cp");
newcp.setAttribute("v:nameU", "Cost");
newCustprop.appendChild(newcp);

However, document.createElement("v:custProps") generates <v:custprops> as opposed to <v:custProps>. Is there anyway to escape this parsing?

Edit 1:

I'm currently reading this article on nodename case sensitivity. It's slightly irrelevant to my problem though because my code is unparsed with <![CDATA]]> and I'd rather not use .innerHTML.

• javascript
• xml
• parsing

3 Answers 3

You need to use createElementNS()/setAttributeNS() and provide the namespace, not only the alias/prefix. The example uses urn:v as namespace.

var xmlns_v = "urn:v";
var newCustprop = document.createElementNS(xmlns_v, "v:custProps");
var newcp = document.createElementNS(xmlns_v, "v:cp");
newcp.setAttributeNS(xmlns_v, "v:nameU", "Cost");
newCustprop.appendChild(newcp);

var xml = (new XMLSerializer).serializeToString(newCustprop);

xml:

<v:custProps xmlns:v="urn:v"><v:cp v:nameU="Cost"/></v:custProps>

It's not remended to use document.createElement for qualified names. See if the document.createElementNS can better serve your purposes.

I still had issues where createElementNs would attach an attribute of "xmls" on my string about using new XMLSerializer().serializeToString(xmlDoc).

I ended up using the following function to create elements with case sensitive tag names:

function createElement(tagName) {
  const doc = new DOMParser().parseFromString(`<${tagName}></${tagName}>`, 'text/xml')
  return doc.children[0]
}