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.
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 4000 certificates already issued!
|
The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
|
