XSLT - xsl:value-of
Although using XSLT to print out static messages is fun to play around with, using an XML document's elements and their contents is probably more useful in real world use. This lesson will teach you how to get the value of elements and attributes in an XML document using the xsl:value-of element.
We will once again be using the class.xml document.
XML Code:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="class.xsl"?>
<class>
<student>Jack</student>
<student>Harry</student>
<student>Rebecca</student>
<teacher>Mr. Bean</teacher>
</class>
XSLT - Element Values
Our XSLT code has been outputting "Found a learner!" for each student element found. Let's replace that string with the student's actual name, by using xsl:value-of to get the element's contents.
XSLT Code (Work in Progress!):
<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="class">
<html>
<body>
<xsl:apply-templates select="student"/>
</body>
</html>
</xsl:template>
<xsl:template match="student">
<p>
<xsl:value-of select="."/>
</p>
</xsl:template>
</xsl:stylesheet>
The highlighted code will return the value of the student element, which is a student's name.
xsl:value-of uses the select attribute to choose elements. Because we are already at the correct element, student, we use a period "." to select the current element's data. The period is a special character to use when you want to select the same element that you matched with template's match attribute.
You can view the updated XML/XSLT file here: class4.xml. If you were outputting the XSLT to a file, this is what the output would look like.
XSLT Output:
<html>
<body>
<p>Jack</p>
<p>Harry</p>
<p>Rebecca</p>
</body>
</html>
XSLT - Attribute Values
xsl:value-of can also be used to retrieve the value of attributes of XML elements. We have slightly modified our XML document to include an id attribute, class-attr.xml.
XML Code:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="class.xsl"?>
<class>
<student id="1">Jack</student>
<student id="2">Harry</student>
<student id="3">Rebecca</student>
<teacher id="1">Mr. Bean</teacher>
</class>
Let's output each student's id number before their name to make a nice list. To select an attribute, use the at sign "@", followed by the name of the attribute.
XSLT Code (Work in Progress!):
<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="class">
<html>
<body>
<xsl:apply-templates select="student"/>
</body>
</html>
</xsl:template>
<xsl:template match="student">
<p>
<xsl:value-of select="@id"/> -
<xsl:value-of select="."/>
</p>
</xsl:template>
</xsl:stylesheet>
You can view our updated XML/XSLT code here: class-attr.xml. The XSLT output is shown below:
XSLT Output:
<html>
<body>
<p>1 - Jack</p>
<p>2 - Harry</p>
<p>3 - Rebecca</p>
</body>
</html>
Download Tizag.com's XML Book
If you would rather download the PDF of this tutorial, check out our
XML eBook from the Tizag.com store. Found Something Wrong in this Lesson?Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time! | 
