Why is the jQuery html() method ignoring line breaks?

Question

I'm building a page of thumbnails with jQuery like this:

ID=this.id;
$('#thumbs').empty().html('<span class="title">'+$('#'+ID).html())+'</span><br />';
var i = 1;
for (i=1;i<=count[ID];i++)
    {
    $('#thumbs').append('<img class="thumb" src="graphics/thumbs/'+ID+'/'+i+'.jpg" />');
    }

The idea being that the <span> would appear, followed by <br /> and then the thumbs, which are simply inline graphics with bottom and right margins, would fill up the rest of the page. And they do-- except, the line break doesn't happen.

I am using Dreamweaver, so I can watch the code live, and sure enough, the script isn't inserting the <br /> tag at all.

Does this have something to do with jQuery's HTML parsing? If so, how to get around it?

Answer 1

Not a jQuery issue (at least, not in version 1.4.2)

http://www.jsfiddle.net/SbFgf/

Taking a second look at your code, I realized you got an early closing paranthesis:

$('#thumbs').empty().html('<span class="title">'+$('#'+ID).html()+'</span><br />');

That should do it.

Answer 2

Its not the problem with jquery's html() function. I did a quick test here and it works. (also in 1.3.2) Maybe the $('#'+ID).html()) is messing it up