XML Display
Viewing and styling XML data in browsers
🎨 How to Display XML?
XML data can be displayed in browsers using CSS for styling or XSLT for transformation. Browsers show raw XML as a tree structure, but you can format it beautifully with proper styling techniques.
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<message>Hello XML!</message>
Result:
The XML will be styled according to the CSS file.
Display Methods
Raw XML
Browser's default tree view
<data>
<item>Value</item>
</data>CSS Styling
Style XML with CSS rules
item {
color: blue;
}XSLT
Transform XML to HTML
<xsl:template match="/">
<html>...</html>
</xsl:template>JavaScript
Parse and display with JS
parser.parseFromString(xml)🔹 Displaying XML with CSS
You can apply CSS styles to XML elements to control their appearance in the browser. Link a CSS file using the xml-stylesheet processing instruction.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="books.css"?>
<library>
<book>
<title>XML Mastery</title>
<author>Sarah Johnson</author>
<price>39.99</price>
</book>
<book>
<title>Web Development</title>
<author>Mike Brown</author>
<price>44.99</price>
</book>
</library>/* books.css */
library { display: block; margin: 20px; }
book {
display: block;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}
title {
display: block;
font-size: 20px;
font-weight: bold;
color: #333;
}
author { display: block; color: #666; }
price {
display: block;
color: green;
font-weight: bold;
}🔹 Transforming XML with XSLT
XSLT (Extensible Stylesheet Language Transformations) converts XML into HTML or other formats. It's powerful for creating rich, formatted output from XML data.
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="transform.xsl"?>
<catalog>
<product id="1">
<name>Laptop</name>
<price>999</price>
</product>
</catalog><!-- transform.xsl -->
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Product Catalog</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Price</th>
</tr>
<xsl:for-each select="catalog/product">
<tr>
<td><xsl:value-of select="name"/></td>
<td>$<xsl:value-of select="price"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>Output:
A formatted HTML table with product information.
🔹 Displaying XML with JavaScript
JavaScript provides powerful methods to parse XML and dynamically display it on web pages. This approach gives you full control over the presentation.
<!DOCTYPE html>
<html>
<body>
<div id="output"></div>
<script>
// XML string
const xmlString = `
<books>
<book>
<title>JavaScript Guide</title>
<author>John Doe</author>
</book>
<book>
<title>CSS Tricks</title>
<author>Jane Smith</author>
</book>
</books>`;
// Parse XML
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");
// Get elements
const books = xmlDoc.getElementsByTagName("book");
let html = "<h2>Book List</h2>";
// Loop through books
for (let i = 0; i < books.length; i++) {
const title = books[i].getElementsByTagName("title")[0].textContent;
const author = books[i].getElementsByTagName("author")[0].textContent;
html += `<p><strong>${title}</strong> by ${author}</p>`;
}
// Display
document.getElementById("output").innerHTML = html;
</script>
</body>
</html>Output:
Book List
JavaScript Guide by John Doe
CSS Tricks by Jane Smith
🔹 Browser XML Display
Modern browsers display XML in a collapsible tree structure by default. This is useful for debugging and viewing XML structure.
Browser Features:
- Collapsible/expandable nodes
- Syntax highlighting
- Error detection and reporting
- Line numbers for debugging
- Attribute display in different colors
<?xml version="1.0" encoding="UTF-8"?>
<company>
<employee id="001">
<name>Alice</name>
<department>IT</department>
</employee>
<employee id="002">
<name>Bob</name>
<department>HR</department>
</employee>
</company>Browser View:
Opens in browser as an interactive tree with + and - icons to expand/collapse nodes.