validation error with jquery append

Question

I have a contrast switcher which fails validation. I've read When is a CDATA section necessary within a script tag? and tried to both escape the characters and use CDATA but I'm still getting validation errors for both.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<script type="text/javascript">
    $(document).ready(function(){
    // DRY wrapper function
    function appendStyleSheet() {
      $('head').append('<link rel="stylesheet" href="{site_url}css/high-contrast.css" type="text/css" id="hc_stylesheet"/>'); 
    }
    // append the style sheet on load if the cookie is set to true
    if ($.cookie('high_contrast_momentum') == 'true') {
      appendStyleSheet();      
    }
    $("#contrast-btn a").click(function () {
        if ($.cookie('high_contrast_momentum') != 'true') {

            appendStyleSheet();      
            $.cookie('high_contrast_momentum', 'true', {expires:365}); // set the cookie to true
        }       
        else {
            // remove the high-contrast style
            $("#hc_stylesheet").remove();
            $.cookie('high_contrast_momentum', 'false');
        }
    });
    });
</script>

The validation error I'm getting is: document type does not allow element "link" here

Mihai Stancu · Answer 1 · 2012-08-03T11:47:32.053

You are allowed to use <link /> tags inside a <head> tag, you are not allowed to use <link /> tags inside a <script> tag.

On the other hand the presence of the <link /> tag inside your <script> tag is a simple misinterpretation. xHTML documents (since you're using an xHTML DTD) indeed contain CDATA sections to make sure the content of the script area is not parsed as xHTML to.

Your error is caused by the use of xHTML reserved characters &/</>.

The validation engine is probably wrongly reading the link inside the script tags even though the content of those script tags should not parsed as HTML.

Try separating the lower that sign from the rest of the string as such:

 $('head').append('<'+'link rel="stylesheet" href="{site_url}css/high-contrast.css" type="text/css" id="hc_stylesheet"/'+'>');

it didn't like the plus sign when I added it, there are more validation errors and seemed to treat the plus sign literally. I think it's parsing fine. The contrast switcher works with the above code. Reading the error message seems to me like I'm not allowed use the tag here. I don't really understand why though. — steve, Aug 03 '12 at 11:21

validation error with jquery append

1 Answers1