首页 > 代码库 > 通过JavaScript将XML转换成HTML

通过JavaScript将XML转换成HTML

2024-08-01 23:01:34   221人阅读

首先是XML文件：

test.xml

 1 <?xml version="1.0" encoding="utf-8"?> 2 <team> 3     <people id="1"> 4         <name>lisi</name> 5         <gender>f</gender> 6     </people> 7     <people id="2"> 8         <name>zhangsan</name> 9         <gender>m</gender>10     </people>11 </team>

 

然后是XSL样式表文件：

test.xsl

 1 <?xml version="1.0"?> 2 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 3  4     <xsl:template match="/"> 5         <html> 6             <body> 7                 <h2>My team people</h2> 8                 <xsl:apply-templates/> 9             </body>10         </html>11     </xsl:template>12 13     <xsl:template match="people">14         <p>15             <xsl:apply-templates select="name"/>16             <xsl:apply-templates select="gender"/>17         </p>18     </xsl:template>19 20     <xsl:template match="name">21         Title:<span style="color:#ff0000"><xsl:value-of select="."/></span>22         <br/>23     </xsl:template>24 25     <xsl:template match="gender">26         Gender:<span style="color:#00ff00"><xsl:value-of select="."/></span>27         <br/>28     </xsl:template>29 30 </xsl:stylesheet>

最后，创建一个html文件，如下所示：

test.html

 1 <html> 2  <body> 3   <script type="text/javascript"> 4      5     //Load XML 6     var xml = new ActiveXObject("Microsoft.XMLDOM"); 7     xml.async = false; 8     xml.load("test.xml"); 9 10     //Load XSL11     var xsl = new ActiveXObject("Microsoft.XMLDOM");12     xsl.async = false;13     xsl.load("test.xsl");14 15     //Transform16     document.write(xml.transformNode(xsl));17 18   </script>19  </body>20 </html>

在ie浏览器下打开test.html文件，可以看到xml文件不是纯文本了，而加上了test.xsl的样式。

注意：这是在浏览器端将xml转换为html，但并不是所有浏览器都支持xslt，所以更靠谱的方式是在服务器端将xml转换为html，然后把html发送到浏览器。

通过JavaScript将XML转换成HTML


联系
我们