XML Basic

XML HOME
XML Introduction
XML How to use
XML Tree
XML Syntax
XML Elements
XML Attributes
XML Validation
XML Validator
XML Viewing
XML CSS
XML XSLT

XML JavaScript

XML Parser
XML DOM
XML to HTML
XML HTTP Request
XML Application

XML Advanced

XML Namespaces
XML CDATA
XML Encoding
XML Server
XML DOM Advanced
XML Don't
XML Technologies
XML in Real Life
XML Editors
XML Summary

XML Examples

XML Examples
XML Quiz
XML Exam

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">
var xmlDoc;
if (window.XMLHttpRequest)
{
xmlDoc=new window.XMLHttpRequest();
xmlDoc.open("GET","cd_catalog.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("cd_catalog.xml");
}

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>

For more information about using JavaScript and the XML DOM, visit our XML DOM tutorial.

	WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Top 10 Web Hosting
UK Reseller Hosting
Web Hosting
FREE Web Hosting

WEB BUILDING
Website Templates Flash Templates Website Builder Internet Business Opportunity
Get a Freelancer
Download XML editor
FREE Flash Website
FREE Web Templates

FLIGHT TICKETS
Find the cheapest flight to any destination now!

EDUCATION
US Web Design Schools
HTML Certification JavaScript Certification XML Certification PHP Certification ASP Certification

STATISTICS
Browser Statistics Browser OS Browser Display

	HOME \| TOP \| PRINT \| FORUM \| ABOUT
W3Schools is for training only. We do not warrant the correctness of its content. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy. Copyright 1999-2009 by Refsnes Data. All Rights Reserved.