Online Test Banks
Score higher
See Online Test Banks
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Display XML with JavaScript on an HTML5 Page

XML is a great way to store data with JavaScript. However, it isn’t the easiest way to see the data. All of the tags tend to hide the data rather than make it easy to understand. A generated XML file tends to lack whitespace, which makes viewing it even more difficult.

Some developers use a Cascading Style Sheet (CSS) method, but most developers prefer to use XML Stylesheet Language for Transformations (XSLT). Using XSLT has some significant advantages in flexibility and the ability to work with complex data over CSS, but XSLT is also a little harder to learn. Check here for an XSLT tutorial.

Nothing works quite so well as a quick example to demonstrate how XSLT works. To use XSLT with an XML file, you need to add a processing instruction to the XML file. The following processing instruction tells the browser displaying the Customer2.XML file to use the CustomerOut.XSLT file to format the information. This is the only difference between the Customers2.XML file and the Customers.XML file.

<?xml-stylesheet type="text/xsl" href="CustomerOut.xslt"?>

To transform an XML document into a document you can see, you build an HTML document from it. The following code provides a typical example of XSLT code that you might use for transformation purposes:

<?xml version="1.0" encoding="UTF-8"?>
  <xsl:template match="/">
      <h1>Customer Listing</h1>
      <table border="1">
         <th>Favorite Color</th>
        <xsl:for-each select="Customers/Customer">
            <xsl:value-of select="Name" />
            <xsl:value-of select="Age" />
              select="FavoriteColor" />

That’s right: XSLT is actually another form of XML, so it starts out with the XML declaration. The <xsl:stylesheet> root node defines the document as providing XSLT support. It includes a namespace attribute that tells the browser where to find information on how to interpret XSLT. Check here to find out more about namespaces.

The <xsl:template> tag tells the browser what information to retrieve from the XML file for display purposes. This document retrieves everything in the XML file.

The next steps begin creating the HTML document, complete with the tags required to do so. This is an abbreviated page. Normally, you’d include all the required tags. The page includes a heading and the start of a table.

The <xsl:for-each> tag processes each of the <Customer> entries in the file. The file then builds the rows and data cells for the table. The <xsl:value-of> tag retrieves the data values of the <Name>, <Age>, and <FavoriteColor> elements.


Some browsers encounter problems using the example from the local drive. For example, Chrome displays a blank page when you access Customers2.XML from the local drive. To test this technique in a way that works for most browsers, copy the files to your web server and then access the XML file from the web server.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus

Inside Sweepstakes

Win an iPad Mini. Enter to win now!