Display XML Data in HTML

by satheesh 2010-01-29 20:35:28

Example for Display XML Data in HTML


<html>
<body>

<script type="text/javascript">
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","cd_catalog.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>

</body>
</html>

Example explained
*****************

* We check the browser, and load the XML using the correct parser (explained in the previous chapter)
* We create an HTML table with <table border="1">
* We use getElementsByTagName() to get all XML CD nodes
* For each CD node, we display data from ARTIST and TITLE as table data.
* We end the table with </table>

Tagged in:

1187
like
0
dislike
0
mail
flag

You must LOGIN to add comments