Displaying XML

Displaying XML in a Webpage

There are multiple ways to display XML content in an HTML page. Here are some common methods:

1. Displaying Raw XML

If you just want to display XML as text inside a <pre> tag:

<pre id="xmlDisplay"></pre>

<script>
fetch("data.xml")
    .then(response => response.text())
    .then(xml => {
        document.getElementById("xmlDisplay").textContent = xml;
    });
</script>

This preserves XML formatting and displays it as raw text.

2. Parsing and Displaying XML Data

If you want to extract and format XML content, use JavaScript:

Example XML (data.xml)

<?xml version="1.0" encoding="UTF-8"?>
<items>
    <item>Item 1</item>
    <item>Item 2</item>
    <item>Item 3</item>
</items>

JavaScript to Display XML as HTML

<button onclick="loadXML()">Load XML</button>
<div id="output"></div>

<script>
function loadXML() {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            let xmlDoc = this.responseXML;
            let items = xmlDoc.getElementsByTagName("item");
            let output = "<ul>";
            for (let i = 0; i < items.length; i++) {
                output += "<li>" + items[i].textContent + "</li>";
            }
            output += "</ul>";
            document.getElementById("output").innerHTML = output;
        }
    };
    xhr.open("GET", "data.xml", true);
    xhr.send();
}
</script>

3. Using XSLT to Transform XML

XSLT (Extensible Stylesheet Language Transformations) can format XML into HTML.

Example XSLT (style.xsl)

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
        <body>
            <h2>Items List</h2>
            <ul>
                <xsl:for-each select="items/item">
                    <li><xsl:value-of select="."/></li>
                </xsl:for-each>
            </ul>
        </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

JavaScript to Apply XSLT

<script>
function transformXML() {
    let xml = new XMLHttpRequest();
    let xsl = new XMLHttpRequest();

    xml.open("GET", "data.xml", false);
    xml.send();
    let xmlDoc = xml.responseXML;

    xsl.open("GET", "style.xsl", false);
    xsl.send();
    let xslDoc = xsl.responseXML;

    let xsltProcessor = new XSLTProcessor();
    xsltProcessor.importStylesheet(xslDoc);

    let resultDocument = xsltProcessor.transformToFragment(xmlDoc, document);
    document.getElementById("output").appendChild(resultDocument);
}
</script>

<button onclick="transformXML()">Transform XML</button>
<div id="output"></div>

4. Displaying XML Using CSS

You can style XML directly using CSS:

XML with Styling (data.xml)

<?xml-stylesheet type="text/css" href="style.css"?>
<items>
    <item>Item 1</item>
    <item>Item 2</item>
    <item>Item 3</item>
</items>

CSS (style.css)

items {
    display: block;
    font-family: Arial, sans-serif;
    padding: 10px;
}

item {
    display: block;
    color: blue;
    margin: 5px 0;
}

This method works when you open the XML file directly in a browser.

Which Method Do You Prefer?

Would you like an example where the XML data updates dynamically?

About It E Research

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.