Cross browser javascript based XSLT

Question

I'm trying to create a cross browser XSLT code that will work with all version of IE/Edge, FireFox and Chrome.

the following code works with IE but not with firefox and chrome. can anyone please give me a clue about what I'm doing wrong?

var XML_DOC = "../../xmlfiles/sample.xml";
var XSL_DOC = "../../xslfiles/sample.xsl";

function loadXMLDoc(){
    var xmlObject;
    var xmlDoc;
    var xslDoc;

    try //Internet Explorer 
    { 
        xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
        xmlDoc.async = false;

        xslDoc = new ActiveXObject('Microsoft.XMLDOM');
        xslDoc.async = false;

        xmlDoc.load(XML_DOC);
        xslDoc.load(XSL_DOC);

        xmlObject = xmlDoc.documentElement.transformNode(xslDoc);
    } 
    catch(e) 
    { 
        try //Firefox, Mozilla, Opera, etc. 
        { 
            xmlDoc = document.implementation.createDocument("","",null); 
            xmlDoc.async = false; 

            xslDoc = document.implementation.createDocument("","",null); 
            xslDoc.async = false; 

            xmlDoc.load(XML_DOC);
            xslDoc.load(XSL_DOC);

            xmlObject = xmlDoc.documentElement.transformNode(xslDoc);
        } 
        catch(e) 
        { 
            try //Google Chrome 
            { 
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        xmlDoc = this.responseXML;
                    }
                };
                xhttp.open("GET", XML_DOC, true);
                xhttp.send();  


                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        xslDoc = this.responseXML;
                    }
                };
                xhttp.open("GET", XSL_DOC, true);
                xhttp.send();  

                xmlObject = xmlDoc.transformNode(xslDoc);
            } 
            catch(e) 
            { 
                error=e.message; 
            } 
        } 
    } 

    return xmlObject; 
}

here is the sample.xml file:

<?xml version="1.0" encoding="windows-1255"?>
<menu>
    <entity id="02_01_00_00_00">
        <description>chapter a</description>
        <image>../images/plus.gif</image>
        <imageOpen>../images/minus.gif</imageOpen>
        <ref>chap02/htm/s02_01_01_01_00_0010</ref>
        <contents>
            <entity id="02_01_01_00_00">
                <description>chapter a1</description>
                <image>../images/plus.gif</image>
                <imageOpen>../images/minus.gif</imageOpen>
                <ref>chap02/htm/s02_01_01_01_00_0010</ref>
                <contents>
                    <entity id="02_01_01_01_00">
                        <description>chapter a11</description>
                        <image>../images/plus.gif</image>
                        <imageOpen>../images/minus.gif</imageOpen>
                        <ref>chap02/htm/s02_01_01_01_00_0010</ref>
                        <contents>                                  
                            <entity id="02_01_01_01_01">
                                <description>blue</description>
                                <image>../images/empty.gif</image>
                                <imageOpen>../images/empty.gif</imageOpen>
                                <ref>chap02/htm/s02_01_01_01_01_0010</ref>
                            </entity>
                    </contents>
                    </entity>
                </contents>
            </entity>           
        </contents>
    </entity>
</menu>

here is the sample.xsl file:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" language="JavaScript">
    <xsl:template match="menu">
        <xsl:apply-templates select="entity"/>
    </xsl:template>
    <xsl:template match="entity">
        <div onclick="window.event.cancelBubble = true;clickedMenuEntry(this);" onselectstart="return false" ondragstart="return false">
            <xsl:attribute name="id">div<xsl:value-of select="@id"/></xsl:attribute>
            <xsl:attribute name="image"><xsl:value-of select="image"/></xsl:attribute>
            <xsl:attribute name="imageOpen"><xsl:value-of select="imageOpen"/></xsl:attribute>
            <xsl:attribute name="ref"><xsl:value-of select="ref"/></xsl:attribute>
            <xsl:attribute name="open">false</xsl:attribute>
            <xsl:attribute name="selected">true</xsl:attribute>
            <xsl:attribute name="title"><xsl:value-of select="description"/></xsl:attribute>
            <xsl:attribute name="STYLE">
                 padding-right: 7px;
                 cursor: hand;

                    <xsl:if expr="depth(this) > 2">
                      display: none;
                  </xsl:if></xsl:attribute>
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td valign="middle" >
                        <img border="0">
                            <xsl:attribute name="id">img<xsl:value-of select="@id"/></xsl:attribute>
                            <xsl:attribute name="SRC"><xsl:value-of select="image"/></xsl:attribute>
                            <xsl:attribute name="alt"><xsl:value-of select="description"/></xsl:attribute>
                        </img>
                    </td>
                    <td valign="middle" nowrap="true" onmouseover="this.style.fontWeight='bold';" onmouseout="this.style.fontWeight='normal';">
                        <xsl:attribute name="STYLE">
                                  padding-right: 7px;
                                  font-family: Arial,Helvetica,sans-serif;
                                  font-size: 12px;
                                  color: #0B467A;
                                    </xsl:attribute>
                        <span onclick="clickedText();">
                            <xsl:value-of select="description"/>
                        </span>
                    </td>
                </tr>
            </table>
            <xsl:apply-templates select="contents/entity"/>
        </div>
    </xsl:template>
</xsl:stylesheet>

the is suppose to create an index menu in which the user can navigate in some kind of e-book.