space or   not outputting in jQuery

I have the following being extracted from an XML and being put into a jQuery variable.

 links.append($("<a href='"+alink+"'></a>&nbsp;").html(desc));

...however the   does not output 开发者_如何转开发onto the page. I need this to separate the hrefs on output

I have also tried

links.append($("<a href='"+alink+"'></a>").html(desc));
    links.append($("&nbsp;"));

Many thanks!

$("<a href='"+alink+"'></a>&nbsp;")

Yeah, that's actually only creating the <a> element, and discarding the nbsp. When you pass a string into the $() function that looks like(*) HTML, jQuery creates the stretch of markup between the first < in the string and the last >. If you've got any leading or trailing content outside those, it gets thrown away(**). You could fool jQuery by saying:

$("<a href='"+alink+"'></a>&nbsp;<!-- don't ignore me! -->")

This doesn't seem to be documented anywhere, makes no sense whatsoever, and might be considered a bug, but it has been jQuery's normal behaviour for some time so it's probably not going away.

When you pass an HTML string to the append function (and other manipulation methods) directly instead of via the $ function, this behaviour does not occur. So:

links.append("<a href='"+alink+"'></a>&nbsp;");

actually does keep the space. But a better way forward is to stop throwing HTML strings about, so you don't have to worry about alink containing ', < or & characters either, and work in a more DOM style:

var link= $('<a/>');
link.attr('href', alink);
link.html(desc);
links.append(link);
links.append('\xA0');

Or, more concisely, using jQuery 1.4's props argument shortcut:

links.append($('<a/>', {href: alink, html: desc}));
links.append('\xA0');

assuming that desc is really something that should contain HTML markup; if not, use text instead.

(I used \xA0, the JavaScript string literal way to include a character U+00A0 NON-BREAKING SPACE as it is a whole two characters shorter than the HTML entity reference. Woohoo!)

(*: how does it tell that a string is HTML? Why, by checking to see if there's a < and > character in it, in that order, of course. Meaning it'll get fooled if you try to use a selector that has those characters in. Brilliant, jQuery, brilliant.(***))

(**: why? see line 125 of jQuery 1.4.2. It builds the HTML fragment from match[1]—the group from the first < to the last > in quickExpr—and not the original string or match[0].)

(***: I'm being sarcastic. The insane over-overloading of the $ function is one of jQuery's worst features.)

You better style with css, something like :

links.append($("<a class='link' href='"+alink+"'></a>").html(desc));

in css :

a.link {
padding-left : 5px ;
padding-right : 5px ;
}

you could try