I need to create some case-sensitive XML nodes in JavaScript which have attribute names with a colon in between them.

Example: <Data ss:Type="String">Contact Name</Data>

When I try to create an element via JavaScript with the createElement() function it creates it in lowercase. Also, there are a lot of problems adding the attributes with a colon in them. For example: ss:Type="String"

This is Excel data, and I am saving the the source .xml file back to an .xls file. The case of the XML elements and attributes is very important for Excel to be able to read the file.

Any examples or pointers will be great help.

I need to create some case-sensitive XML nodes in JavaScript which have attribute names with a colon in between them.

Example: <Data ss:Type="String">Contact Name</Data>

When I try to create an element via JavaScript with the createElement() function it creates it in lowercase. Also, there are a lot of problems adding the attributes with a colon in them. For example: ss:Type="String"

This is Excel data, and I am saving the the source .xml file back to an .xls file. The case of the XML elements and attributes is very important for Excel to be able to read the file.

Any examples or pointers will be great help.

• javascript
• jquery
• xml
• excel

• A couple of tips: 1) XML is case sensitive, that isn't an option 2) Those semicolons are called "namespaces" – Álvaro González Commented Dec 3, 2012 at 12:28

3 Answers 3

The JavaScript methods you are looking for are document.createElementNS and elm.setAttributeNS

var e = document.createElementNS('http://www.microsoft./office/excel/', 'Data');
e.setAttributeNS('http://www.microsoft./office/excel/', 'ss:Type', 'String');
e.textContent = 'Contact Name';

Then if you want to get strings back, .innerHTML won't work anymore so you have to use an XMLSerializer

var s = new XMLSerializer();
s.serializeToString(e);

The answer by Paul S. lead me to a solution.

I created the required XML DOM elements with createElement() and added the required attributes with setAttribute(). This resulted in:

<data ss:type="String">Contact Name</data>

Note that the element and attribute name in this example are both lower-case. However, what I really wanted was Pascal case:

<Data ss:Type="String">Contact Name</Data>

After first converting the XML DOM to a string via XMLSerializer() as suggested by Paul S., I then simply used replace() to convert all occurrences of <data to <Data and ss:type to ss:Type.

The solution to my question are XMLSerializer() and String replace() function

It's a dated question but i'll give my answer:
When using window.document to create elements you are using an HTMLDocument (with ns="http://www.w3/1999/xhtml") and nodes created with it responds to html standards with the limitations you experienced.
You should use a Document instead to handle generic XML.

// instantiate a new Document  
var xml_doc = document.implementation.createDocument('optional_namespace','rootElement');  

//  then your code to create element  
var e = xml_doc.createElementNS('http://www.microsoft./office/excel/', 'Data');  
e.setAttributeNS('http://www.microsoft./office/excel/', 'ss:Type', 'String');  
e.textContent = 'Contact Name';  

// probably append it  
xml_doc.documentElement.appendChild(e);  

// serialized xml_doc:  
var s = new XMLSerializer();  
s.serializeToString(xml_doc);  

/*
<rootElement xmlns="optional_namespace">
  <Data xmlns="http://www.microsoft./office/excel/" xmlns:ss="http://www.microsoft./office/excel/" ss:Type="String">Contact Name</Data>
</rootElement>"
*/

EDIT: tested in Chrome and FF