为什么 HTML 数据被剥离，只剩下纯文本？答案

【问题标题】：Why is HTML data stripped and only plain text left?为什么 HTML 数据被剥离，只剩下纯文本？
【发布时间】：2012-04-24 15:11:43
【问题描述】：

我正在尝试使用 XSL 转换将转换后的 XML 数据放入 HTML 页面。这是我的 XML：

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="w3.xsl"?>
<catalog>
    <cd>
        <title>Empire Burlesque</title>
        <artist>Bob Dylan</artist>
        <country>USA</country>
        <company>Columbia</company>
        <price>10.90</price>
        <year>1985</year>
    </cd>
    <cd>
        <title>Hide your heart</title>
        <artist>Bonnie Tyler</artist>
        <country>UK</country>
        <company>CBS Records</company>
        <price>9.90</price>
        <year>1988</year>
    </cd>
    <cd>
        <title>Greatest Hits</title>
        <artist>Dolly Parton</artist>
        <country>USA</country>
        <company>RCA</company>
        <price>9.90</price>
        <year>1982</year>
    </cd>
</catalog>

XSL 文件的内容：

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html" />
<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="catalog/cd">
      <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 没有 HTML 属性；它看起来像这样：

应该是这样的：

这是填充 DOM 的函数，这是问题的原因吗：

//Load the XML document and XSLT document into XML DOM objects
var xml = document.implementation.createDocument("", "", null);
var xslt = document.implementation.createDocument("", "", null);

//Set the async property on both documents to false so that they both completely load 
//before any further processing is attempted.
xml.async = false;
xslt.async = false;

//Load XML and XSLT documents into the XML DOM objects.
xml.load("w3.xml");
xslt.load("w3.xsl");

//Create a new XSLTProcessor object and use its importStylesheet() method to import the XSLT DOM object.
var processor = new XSLTProcessor();
processor.importStylesheet(xslt);

//Transform the XML to a new XML DOM object with the transformToDocument() method of the XSLTProcessor.
var XmlDom = processor.transformToDocument(xml)

//Create a new XMLSerializer and use it to serialize the new XML DOM object to a string.
var s = new XMLSerializer(); 
var output = s.serializeToString(XmlDom.documentElement);

//The result can then be output to the innerHTML property of any element on the page.
var outputDiv = document.getElementById("xmldata");
outputDiv.innerHTML = output;

【问题讨论】：

下图显示了执行的结果：这是输出的样子imgur.com/mzVOp,ilVgj#0和imgur.com/mzVOp,ilVgj#1是执行后的样子。
我无法识别显示 HTML 的应用程序，您确定它呈现 HTML 表格属性吗？
那是带有firebug插件的firefox。你看到图中的日志控制台

标签： javascript html xml dom

【解决方案1】：

我认为您的“主机”HTML 页面必须具有将 HTML 标识为 HTML5 的 DOCTYPE。

然后，因为您正在尝试添加属性，例如 HTML 5 中已过时的 bgcolor（请参阅W3C: HTML5 differences from HTML4），它们会被忽略，因此不会添加到 DOM。

尝试改用样式属性 - 按照链接页面中的建议。

tr 元素的 XSLT 将如下所示：

 <xsl:template match="/">
 ...
  <tr style="background-color:#9acd32;"> 
    <th>Title</th> 
    <th>Artist</th> 
  </tr>
 ...
  </xsl:template>

【讨论】：

找到原因了，好像是css导致的错误，还在调试中，比较晦涩。
@Demego 您是说该错误与您使用 HTML5 规范中描述为“已过时”的属性这一事实无关？
是的，是 CSS 属性以误导的方式改变了表格，让我认为这是转换。过时的属性可以正常工作。