Append XML node in javascript

This site is best viewed in a modern browser with JavaScript enabled.

jmlilly

I have a callback function that returns an xml string which is a table of routes and corresponding miles.

xmlData=new ActiveXObject("Microsoft.XMLDOM");
xmlData.async="false";
xmlData.loadXML(returnmessage);

the xmlData.xml is this:

<NewDataSet>
	<Routes>
		<RouteName>StLouisToNewYork</RouteName>
		<Miles>556</Miles>
	</Routes>
	<Routes>
		<RouteName>MinneapolisToDallas</RouteName>
		<Miles>948</Miles>
	</Routes>
	<Routes>
		<RouteName>LosAngelesToDenver</RouteName>
		<Miles>1033</Miles>
	</Routes>
</NewDataSet>

In javascript, I would like to add a new route to my xmlData object.

var strRte = "DenverToAtlanta";
var strMi = "1408";

How do I do this? This is what I'm trying, but I'm throwing an error.

var newRoute = xmlData.createElement("Routes");
var nameNode = newRoute.createElement("RouteName");  <<<<<<<< Object doesn't support this property or method
var nameText = nameNode.createTextNode(strRte);
var milesNode = newRoute.createElement("Miles");
var milesText = milesNode.createTextNode(strMi);
newRoute.appendChild(nameNode);
newRoute.appendChild(milesNode);
xmlData.appendChild(newRoute);

I want my xmlData.xml to be this (Although I don't care which position):

<NewDataSet>
	<Routes>
		<RouteName>StLouisToNewYork</RouteName>
		<Miles>556</Miles>
	</Routes>
	<Routes>
		<RouteName>MinneapolisToDallas</RouteName>
		<Miles>948</Miles>
	</Routes>
	<Routes>
		<RouteName>LosAngelesToDenver</RouteName>
		<Miles>1033</Miles>
	</Routes>
	<Routes>
		<RouteName>DenverToAtlanta</RouteName>
		<Miles>1408</Miles>
	</Routes>
</NewDataSet>

Kor

all the elements, text nodes included, should be created on the document element. Text nodes should be appended as any other element, to the desired parent.
something like:

var newRoute = xmlData.documentElement.createElement("Routes");
var nameNode = xmlData.documentElement.createElement("RouteName");  

var nameText =xmlData.documentElement.createTextNode(strRte);
nameNode.appendChild(nameText)
var milesNode = xmlData.documentElement.createElement("Miles");
var milesText = xmlData.documentElement.createTextNode(strMi);
milesNode.appendChild(milesText);
newRoute.appendChild(nameNode);
newRoute.appendChild(milesNode);
xmlData.appendChild(newRoute);

jmlilly

Of course! Thank you.

I did have one minor problem. I couldn't get this to work:
xmlData.documentElement.createElement("Routes");
and instead I could get this to work:
xmlData.createElement("Routes");

and then to finally do the append, I couldn't get this to work:
xmlData.appendChild(newRoute);
and instead I could get this to work:
xmlData.documentElement.appendChild(newRoute);

I found that I couldn't append directly to my xmlData document object, but had to append to it's root node which is the documentElement, or in my case the node named "NewDataSet". Even with that, I couldn't append to the rootNode directly, but to rootNode[0]. I don't quite understand that, but when tested, it did correctly append my new record at the correct level. I decided that I prefer appending to the documentElement because I don't have to worry about knowing the name of the root element.

Here's what I finally settled on:

      var newRoute = xmlData.createElement("Routes");
      var nameNode = xmlData.createElement("RouteName");  
      var nameText = xmlData.createTextNode(strRte);
      nameNode.appendChild(nameText);

      var milesNode = xmlData.createElement("Miles");
      var milesText = xmlData.createTextNode(strMi);
      milesNode.appendChild(milesText);

      newRoute.appendChild(nameNode);
      newRoute.appendChild(milesNode);
      //This works
      //rootNode = xmlData.getElementsByTagName("NewDataSet");
      //rootNode[0].appendChild(newRoute);
      //This is better:
      xmlData.documentElement.appendChild(newRoute);