How to generate HTML from XML using XSLT and javascript?
EDIT: The above similar question is not what I'm looking for. I am trying to convert the converted result to my html document.
I am following this tutorial: http://www.w3schools.com/xsl/xsl_client.asp
I have a HTML page. I want to create HTML using data from an XML file and create it using XSLT using javascript to read XML and XSLT files from a server.
HTML page:
<html>
<head>
<script type="text/javascript" src="/scripts/onload.js"></script>
</head>
<body onload="displayResult()">
<div id="example" />
</body>
</html>
JavaScript:
function loadXMLDoc(filename)
{
if (window.ActiveXObject)
{
xhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
else
{
xhttp = new XMLHttpRequest();
}
xhttp.open("GET", filename, false);
try {xhttp.responseType = "msxml-document"} catch(err) {} // Helping IE11
xhttp.send("");
return xhttp.responseXML;
}
function displayResult()
{
var location = document.URL;
var xmlLocation = location +"myXMl.xml";
xml = loadXMLDoc(xmlLocation);
xsl = loadXMLDoc("style.xsl");
// code for IE
if (window.ActiveXObject || xhttp.responseType == "msxml-document")
{
ex = xml.transformNode(xsl);
document.getElementById("example").innerHTML = ex;
}
// code for Chrome, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml, document);
document.getElementById("example").appendChild(resultDocument);
}
}
XSLT file:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="movie">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
The XML file is nothing special - as it just contains information about the CD, etc.
I am confused because it looks like I am "inserting" the XSLT output into the "example" div
that is already in body
html
. But XSLT already defines nodes html
, head
and body
. Aren't I technically putting a <html>
node inside <div id="example" />
, and shouldn't that result in invalid html? (nested tags html
)? When I look at the console in Safari, DOM looks fine (there is only one set html
, head
, body
etc. So what happens? Do I understand how it works XSLT
?
source to share
You have not understood how XSLT works. The code places the nodes html
and body
in your element div
. It's just that the browser probably prefers to ignore them at this point and not add them to the DOM.
So the W3Schools example is probably very deceiving. XSLT must not include html
and tags body
. You really need them if you are using an <?xml-stylesheet
XML processing statement to render XML as HTML in a browser (as shown at http://www.w3schools.com/xsl/xsl_transformation.asp for example)
source to share
you can use the html tags specified in XSLT as some dummy tags, you can remove them if you don't want to use them.
Just change the XSLT below.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="movie">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
and you get basic html
, head
and body tags
.
source to share