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

Related posts:

1. ASP-JavaScript In this tutorial we will create a regular HTML page with a small javascript code, and we will use this...
2. PHP Tutorial – Part VI Introduction In this part I will continue this and also show you how to use PHP and forms together to...
3. PHP Tutorial – Part II Printing Text To output text in your PHP script is actually very simple. As with most other things in PHP,...
4. JavaScript – Agree Before Entry -Source Code Save this code as external JavaScript file named: agree.js var agree=0; // 0 = ‘no’, 1 = ‘yes’ function agree2()...
5. File upload script-PHP Here I am giving a full source code of File Upload at run time. You can upload single file. You...