From http://www.w3schools.com (Copyright Refsnes Data)

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>

Try it yourself »

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.

« Previous

Next Chapter »