JQuery won't accept escaped | character

Question

I have code in the footer of my site that appends a hyperlink onto the end of the footer (in this case if the site detects that it has a vertical scrollbar.

$(function() {
    if($(document).height() > $(window).height()) {
        $("\xA0\x7C\xA0<a class=\"footer top\" href=\"\">Top of Page</a>").appendTo("#footer");
    }
});

My footer is laid out "Obligatory © stuff | Top of page link" (note the pipe) and I would like that to be added in with the link.

However, jQuery won't accept the pipe due to it being a special character. I've tried to feed it the character as its code (\x7C) or by escaping it (\|) but I always end up with this error:

Uncaught Error: Syntax error, unrecognized expression:  |  <a class="footer top" href="">Top of Page &uarr;</a>

Is there any possible way to have jQuery just accept this character as a string literal and not try to parse it?

Answer 1

You could try .append(), which would not necessarily expect a jQuery object and you could pass an html String.

$(function() {
    if($(document).height() > $(window).height()) {
        $("#footer").append("| <a class=\"footer top\" href=\"\">Top of Page &uarr;</a>");
    }
});

Working fiddle: http://jsfiddle.net/DG3w6/