View Full Version : Convert an XML node into HTML

07-05-2006, 06:47 PM
Not sure best place to post this since it uses both XML and javascript...

I have created an XML menu-system that I am trying to incorporate into a web-page. I have already got the menu part to work, but I am having trouble getting the main screen to "load" from the XML... (BTW: using Firefox

Sample XML:

Item 1
This div would go into the main section on the page
<br />
I want to keep the format of this general so that the XML can be different for each menuItem
<label for="textBox">
Maybe even having custom forms:
<input type="text" id="textBox" name="textBox" size="20" />

Then in the js (after I have loaded the entire XML into var xmlMenu):

var xmlFrag = xmlMenu.getElementsByTagName('div')[0];
var menuFrag = document.createElement('div');

menuFrag.id = 'mainSection';
document.replaceChild(menuFrag, document.getElementById('mainSection'));

Doing this just displays nothing in the mainSection; however the javascript Console shows no error. Furthermore, looking at the DOM tree (using FF's DOM Inspector) shows that mainSection does have the div from the XML file (including all of the children like the <p>'s). However, whereas the div for the mainSection is considered to be an [object HTMLDivElement] by the inspector, the div from the XML file is just an [object Element], suggesting that it is not parsing the node from the XML file into HTML.

So my question: Is there a way to grab the contents of an XML node and have it displayed / parsed as HTML? Perhaps getting the XML contents as a string (not sure how / if possible) and then using mainSection.innerHTML = xmlString; ?

07-05-2006, 10:33 PM
I guess you could place the HTML elements in the "http://www.w3.org/1999/xhtml" namespace.

That is, change <div> to <div xmlns="http://www.w3.org/1999/xhtml"> in your sample XML.

07-05-2006, 10:47 PM
Call it a personalize preference, but I like to keep the XML as a database, not a markup language by filling it with HTML elements. The way that I would go about this is keep the XML as a strict set of data records, read the XML into your browser using JavaScript, then create an XSL processor for IE/FF to import an XSL document, lastly, using the XSL processor that you create transform your desired HTML element with the XML/XSL.

07-06-2006, 03:47 PM
Thanks for the help...
zcorpan: I was also thinking that the DTD may have had something to do with it. I had been working with no DTD / DOCTYPE at the time, but even after adding in those definitions (and checking my code to be XHTML compliant) it still was just parsing the "html" elements from the xml document as just basic xml. Still, it was good to just get into the habit of working with a correct DTD...

ealbrecht: I somewhat agree, which is why I was able to get the rest of the menu system in place. However since this will be an intranet web app. for manufacturing, the main "frame" (actually just a div) will be quite varied depending upon what step in the build process the user is on (the "menu" actually being a listing of build-steps). In one step, it may just be a <p> of instructions with a picture to go along with it; the next may be a form where the user has to scan in the serial number of a part they are installing. Thus XSL wouldn't be quite appropriate for this... In other words, the "html" markup is actually another piece of data housed in the xml database.

This got me thinking; what I was really after was the "nodeValue" of the <mainpage> element in the xml (I added that element to denote the xml vs. the html markup). However, using normal tags would render the "html" to be child nodes instead of one big chuck of a nodeValue. So to get the "html" made into text, I just needed to "hide" the tags; thus I exchanged <'s with ~'s and >'s with `'s (both characters on the tilda-key on the keyboard). So <div> became ~div` (substitution made easy by the search/replace function of the IDE I'm using). Then I just used js to parse the nodeValue and assign it to the mainSection.innerHTML:

// Get the nodeValue from the XML (and declare other var's)
// Note xmlMenuItem is the <mainpage> element of the xml document
var mainFrame = document.getElementById('mainSection');
xmlMenuItem.normalize(); // Merge all textNodes into one
var xmlFrag = xmlMenuItem.firstChild.nodeValue;

// Parse the retrieved nodeValue
// Not sure if I need to escape these characters, but it doesn't hurt
xmlFrag = xmlFrag.replace(/\`/g, "\>");
xmlFrag = xmlFrag.replace(/\~/g, "\<");
mainContainer.replaceChild(mainFrag, mainFrame);

Doing this works and keeps the "html" stored along with the rest of the menuItem for easy updates to the system / data. The only problem that I could forsee is that the regular-expression parsing may slow down loading the page if there was extensive HTML in that section (no pun intended).