Question

I have an external javascript file that I want to, upon include, write some HTML to the end of the web page.

Upon doing so though I get the error Missing } in XML expression on the line that uses dropdownhtml.

Here is my code

var dropdownhtml = '<div id="dropdown"></div>';

$(document).ready(function(){

    //$(document).append(dropdownhtml);
    alert(dropdownhtml);
});

The XHTML webpage that includes this file does so like this:

<script type="text/javascript" src="/web/resources/js/dropdownmenu.js"></script>

Doing either append or alert throws up the same error, what is going wrong?

Answer 1

Edit Your update changes the question a bit. 🙂

There’s nothing wrong with your quoted Javascript or with the script tag that includes it, the problem must lie elsewhere on the page.

The old answer:

If you’re including Javascript inside an XML document, you must wrap it up in a CDATA section, or you’ll run into trouble like this because the XML parser neither knows nor cares about your Javascript quotes, and instead seems markup (your <div>s in the string).

E.g.:

<foo>
<bar><![CDATA[
    var dropdownhtml = '<div id="dropdown"></div>';

    $(document).ready(function(){

        //$(document).append(dropdownhtml);
        alert(dropdownhtml);
    });
]]></bar>
</foo>

Naturally you need to ensure that the ]]> sequence never appears in a string (or comment, etc.) your script, but that’s quite easy to do (for instance: "Be sure to interrupt the end sequence with a harmless backslash like this: ]]\>; that escape just resolves to > anyway.")