I have some jQuery code that, without it in the document it passes validation fine, but with it in it causes errors. The code in question is here:

    $.ajax({
        type: "GET",
        url: "data.xml",
        dataType: "xml",
        success: function(xml) {

            //Update error info
            errors = $(xml).find("Errors").find("*").filter(function ()
            {
                return $(this).children().length === 0;
            });

            if (errors.length == 0)
            {
                statuscontent = "<img src='/web/resources/graphics/accept.png' alt='' /> System OK";
            }
            else
            {
                statuscontent = "<img src='/web/resources/graphics/exclamation.png' alt='' /> "+errors.length+" System error"+(errors.length>1?"s":"");
            }

            $("#top-bar-systemstatus a").html(statuscontent);

            //Update timestamp
            $("#top-bar-timestamp").html($(xml).find("Timestamp").text());

            //Update storename
            $("#top-bar-storename").html("Store: "+$(xml).find("StoreName").text());
        }
    });

There are loads of other jQuery code on the page which all works fine and causes no errors so I cannot quite understand what is wrong with this. The page isn't "live" so cannot provide a link to it unfortunately.

The error it lists is

document type does not allow element "img" here

And the line of code it points to is here:

 statuscontent = "<img src='/web/resources/graphics/accept.png' alt='' /> System OK";

It also has an issue with the next assignment to statuscontent