|
|
|
XML to HTML
This chapter explains how to display XML data as HTML.
Display XML Data in HTML
In the example below, we loop through an XML file (cd_catalog.xml), and
display each CD element as an HTML table row:
Example
<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> |
View it » |
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>
For more information about using JavaScript and the XML DOM, visit our XML
DOM tutorial.
|
|
|
|
