Using jQuery from an XSLT throws error; $ is undefined after that

Using jQuery from an XSLT throws error; $ is undefined after that

I've been getting a jQuery error when loading jQuery-1.4.1 from XHTML that was generated on the client from an XSL stylesheet. jQuery throws an error on line 825, "cannot set property 'display' of null", where it tries to access the style property of a div that was created using document.createElement. This property is automatically set when calling document.createElement from a XHTML document, but not when calling document.createElement from a XSLT generated XHTML document.

Strangely, this works in Internet Explorer 8 (after clicking away a security warning), but not in Firefox 3.5.3 or Chrome 4.0...

I've attached a reduced test case to this post. The code in data.js works when called from data.html, but crashes when called from data.xml + data.xsl.

Here is the content of the files

data.xml

<?xml-stylesheet type="text/xsl" href="data.xsl"?>
<data>
<obj>Thing 1</obj>
<obj>Thing 2</obj>
</data> 

data.xsl

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
xmlns="http://www.w3.org/1999/xhtml"
version="1.0">

<xsl:template match="/">
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js"/>
<script type="text/javascript" src="test.js"/>
</head>
<body>
<h1>XSLT test</h1>
<ul>
<xsl:apply-templates select="/data/obj"/>
</ul>
</body>
</html>
</xsl:template>

<xsl:template match="/data/obj">
<li>
<xsl:value-of select="."/>
</li>
</xsl:template>

</xsl:stylesheet>

data.js

alert("Running test.js");
$(document).ready(function() {
alert("Document is ready");
});
alert("Registered event handler");

data.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js"/>
<script type="text/javascript" src="test.js"/>
</head>
<body>
<h1>XSLT test</h1>
<ul>
<li>Thing 1</li>
<li>Thing 2</li>
</ul>
</body>
</html>