如何使用 XSLT 和 javascript 从 XML 创建 HTML？答案

【问题标题】：How to create HTML from XML using XSLT and javascript?如何使用 XSLT 和 javascript 从 XML 创建 HTML？
【发布时间】：2014-11-02 13:26:06
【问题描述】：

我正在关注本教程：http://www.w3schools.com/xsl/xsl_client.asp

我有一个 HTML 页面。我想使用 XML 文件中的数据创建 HTML，并使用 XSLT 设置样式，方法是使用 JavaScript 从服务器读取 XML 和 XSLT 文件。

HTML 页面：

<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 文件：

<?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>

xml 文件没有什么特别之处 - 因为它只包含 CD 的信息等。

我很困惑，因为看起来我正在将 XSLT 的输出“插入”到“示例”div 中，该示例已经在 html 的 body 中。但是 XSLT 已经定义了 html、head 和 body 节点。所以我不是在技术上将<html> 节点放在<div id="example" /> 内，这不应该导致不正确的 html 吗？（嵌套html 标签）？当我在 safari 中查看控制台时，DOM 看起来很正常（只有一组 html、head、body 等。那么这是怎么回事？我是否误解了 XSLT 的工作原理？

【问题讨论】：

How can I use javascript to transform xml & xslt的可能重复
那不是一回事。我不只是尝试使用 xslt 转换 xml。我正在尝试将结果插入到 html 中。
将结果或其中的一部分放入变量中，然后使用 document.getElementById("yourContainer").innerHTML= yourPartialVariable;

标签： javascript html xml xslt

【解决方案1】：

您没有误解 XSLT 的工作原理。代码将html 和body 节点放在div 元素中。只是浏览器可能会选择忽略它们，而不是将它们添加到 DOM 中。

因此，W3Schools 的示例可能非常具有误导性。 XSLT 不应真正包含html 和body 标记。只有在 XML 中使用 <?xml-stylesheet 处理指令以在浏览器中将 XML 显示为 HTML 时，您才真正需要它们（例如，http://www.w3schools.com/xsl/xsl_transformation.asp 所示）

【讨论】：

【解决方案2】：

您可以将 XSLT 中给出的 html 标签当作一些虚拟标签，如果您不想使用它们，可以将它们删除。

只需将 XSLT 修改为以下。

<?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>

你仍然得到你的主要html、head和body tags。

【讨论】：