title: Why is HTML data stripped and only plain text left?
body: <p>I'm trying to put transformed XML data into an HTML page using an XSL transform. Here is my XML:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
  &lt;?xml-stylesheet type="text/xsl" href="w3.xsl"?&gt;
  &lt;catalog&gt;
      &lt;cd&gt;
          &lt;title&gt;Empire Burlesque&lt;/title&gt;
          &lt;artist&gt;Bob Dylan&lt;/artist&gt;
          &lt;country&gt;USA&lt;/country&gt;
          &lt;company&gt;Columbia&lt;/company&gt;
          &lt;price&gt;10.90&lt;/price&gt;
          &lt;year&gt;1985&lt;/year&gt;
      &lt;/cd&gt;
      &lt;cd&gt;
          &lt;title&gt;Hide your heart&lt;/title&gt;
          &lt;artist&gt;Bonnie Tyler&lt;/artist&gt;
          &lt;country&gt;UK&lt;/country&gt;
          &lt;company&gt;CBS Records&lt;/company&gt;
          &lt;price&gt;9.90&lt;/price&gt;
          &lt;year&gt;1988&lt;/year&gt;
      &lt;/cd&gt;
      &lt;cd&gt;
          &lt;title&gt;Greatest Hits&lt;/title&gt;
          &lt;artist&gt;Dolly Parton&lt;/artist&gt;
          &lt;country&gt;USA&lt;/country&gt;
          &lt;company&gt;RCA&lt;/company&gt;
          &lt;price&gt;9.90&lt;/price&gt;
          &lt;year&gt;1982&lt;/year&gt;
      &lt;/cd&gt;
  &lt;/catalog&gt;
  </code></pre>
  
  <p>The contents of XSL file:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
  &lt;xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
  
  &lt;xsl:output method="html" /&gt;
  &lt;xsl:template match="/"&gt;
    &lt;html&gt;
    &lt;body&gt;
    &lt;h2&gt;My CD Collection&lt;/h2&gt;
      &lt;table border="1"&gt;
        &lt;tr bgcolor="#9acd32"&gt;
          &lt;th&gt;Title&lt;/th&gt;
          &lt;th&gt;Artist&lt;/th&gt;
        &lt;/tr&gt;
        &lt;xsl:for-each select="catalog/cd"&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;xsl:value-of select="title"/&gt;&lt;/td&gt;
          &lt;td&gt;&lt;xsl:value-of select="artist"/&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;/xsl:for-each&gt;
      &lt;/table&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  &lt;/xsl:template&gt;
  &lt;/xsl:stylesheet&gt;
  </code></pre>
  
  <p>But the transformed XML does not have the HTML attributes; it looks like this:</p>
  
  <p><img src="https://i.imgur.com/ilVgj.jpg"/></p>
  
  <p>It should look like this:</p>
  
  <p><img src="https://i.imgur.com/mzVOp.jpg"/></p>
  
  <p>Here is the function that fills the DOM, is this the cause of the problem:</p>
  
  <pre><code>//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;
  </code></pre>