This chapter explains how to display XML data as HTML. In the example below, we loop through an XML file (test.xml), and display each element as an HTML table row:
<script type=”text/javascript”>
var xmlDoc;
if (window.XMLHttpRequest)
{
xmlDoc=new window.XMLHttpRequest();
xmlDoc.open(“GET”,”test.xml”,false);
xmlDoc.send(“”);
xmlDoc=xmlDoc.responseXML;
}
// IE 5 and IE 6
else if (ActiveXObject(“Microsoft.XMLDOM”))
{
xmlDoc=new ActiveXObject(“Microsoft.XMLDOM”);
xmlDoc.async=false;
xmlDoc.load(“test.xml”);
}
document.write(“<table>”);
var x=xmlDoc.getElementsByTagName(“TEST”);
for (i=0;i<x.length;i++)
{
document.write(“<tr><td><b>”);
document.write(x[i].getElementsByTagName(“SNIPPET”)[0].childNodes[0].nodeValue);
document.write(“</b></td></tr><tr><td>”);
document.write(x[i].getElementsByTagName(“NAME”)[0].childNodes[0].nodeValue);
document.write(“</td></tr><tr><td>”);
document.write(x[i].getElementsByTagName(“EMAIL”)[0].childNodes[0].nodeValue);
document.write(“</td></tr><tr><td>”);
document.write(x[i].getElementsByTagName(“WEBSITE”)[0].childNodes[0].nodeValue);
document.write(“</td></tr><tr><td>”);
document.write(x[i].getElementsByTagName(“LICENSE”)[0].childNodes[0].nodeValue);
document.write(“</td></tr>”);
}
document.write(“</table>”);
</script>
* We check the browser, and load the XML using the correct parser
* We create an HTML table with <table>
* We use getElementsByTagName() to get all XML nodes
* For each TEST node, we display data from XML as table data.
* We end the table with </table>
Download the script : Convert-xml-to-html
