Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Using client side XSLT transformations in HTML5
Client-side XSLT transformations allow you to convert XML data into HTML directly in the browser using JavaScript's XSLTProcessor API. This is useful for displaying XML data in a formatted way without server-side processing.
Browser Support
The XSLTProcessor API is supported by most modern browsers, including Chrome, Firefox, Safari, and Edge. Android 4.0+ and iOS 2.0+ also support XSLT transformations.
Basic Syntax
const processor = new XSLTProcessor(); processor.importStylesheet(xslDocument); const result = processor.transformToFragment(xmlDocument, document);
Complete Example
Here's a working example that transforms XML book data into HTML:
<!DOCTYPE html>
<html>
<head>
<title>XSLT Example</title>
</head>
<body>
<div id="output"></div>
<script>
// XML data
const xmlString = `
<books>
<book id="1">
<title>JavaScript Guide</title>
<author>John Smith</author>
<price>29.99</price>
</book>
<book id="2">
<title>HTML5 Handbook</title>
<author>Jane Doe</author>
<price>24.99</price>
</book>
</books>`;
// XSL stylesheet
const xslString = `
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<h2>Book Catalog</h2>
<table border="1">
<tr><th>Title</th><th>Author</th><th>Price</th></tr>
<xsl:for-each select="books/book">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="author"/></td>
<td>$<xsl:value-of select="price"/></td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>`;
// Parse XML and XSL
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");
const xslDoc = parser.parseFromString(xslString, "text/xml");
// Create XSLT processor
const processor = new XSLTProcessor();
processor.importStylesheet(xslDoc);
// Transform XML using XSL
const resultFragment = processor.transformToFragment(xmlDoc, document);
// Display result
document.getElementById('output').appendChild(resultFragment);
</script>
</body>
</html>
Key Methods
The XSLTProcessor provides several transformation methods:
-
transformToFragment()- Returns a DocumentFragment -
transformToDocument()- Returns a complete Document -
setParameter()- Sets XSL parameters -
getParameter()- Gets XSL parameter values
HTML5 Specification Notes
According to the HTML5 specification, when XSLT transformations create script elements:
- Scripts created by
transformToDocument()have their "already started" flag set and never execute - All generated script elements are marked as "parser-inserted"
- This ensures proper security and execution control in transformed documents
Common Use Cases
- Converting XML feeds to HTML tables
- Formatting XML configuration data
- Creating dynamic reports from XML data
- Transforming XML APIs responses for display
Conclusion
Client-side XSLT transformations provide a powerful way to convert XML to HTML in the browser. Use the XSLTProcessor API for real-time data formatting without server-side processing.
298 Views
