Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null

StackOverflow https://stackoverflow.com/questions/23612777

  •  20-07-2023
  •  | 
  •  

Question

I get weird issue after trying to display xml data through xsl on html. when I compile the html file on my desktop, no issue shows up. However, when I upload these files to my server and compile the html file, I get this error message on Opera latest version: "Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null"

I also get similar issue when run that on FF says "NS_ERROR_ILLEGAL_VALUE: Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIXSLTProcessor.importStylesheet]".

it is exact same code from w3school I'm using, but surprisingly this issue on my side happening...

you can find the code The full code XSLT - On the Client

The xml file::

<?xml version="1.0" encoding="UTF-8"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
.
.
</catalog>

The xsl 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 style="text-align:left">Title</th>
      <th style="text-align:left">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>

The html file::

<html>
<head>
<script>
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()
{
xml = loadXMLDoc("cdcatalog.xml");
xsl = loadXMLDoc("cdcatalog.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);
  }
}
</script>
</head>
<body onload="displayResult()">
<div id="example" />
</body>
</html>

any idea why such none sense errors are showing up on these browsers... The issue is also on other browsers and this is just an example where I keep testing..

Was it helpful?

Solution

The http://www.w3schools.com/xsl/tryit.asp?filename=cdcatalog works fine for me with Firefox and Opera so there must be some difference in your settings. For instance if the catalog.xsl file is not served with a proper XML MIME type the XMLHttpRequest might not populate the responseXML property with the stylesheet code which could explain why Firefox complains on the importStylesheet call.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top