jQuery Error regarding .text

Question

$(document).ready(function() {
  $('.taskStatus').text(function(n, oldcontent) {
     if (oldcontent == "Done") return "<a href='blah.com'>Click Here</a>";
  });
}); 


<span id="taskStatus_34" class="taskStatus">Done</span>

Why does the above code display the following on my webpage

Screenshot below:

Browser: Chrome 6.0.472.55 jQuery: 1.4.1

Edit: Apparently, it works for p (paragraph) tags, but not for divs and spans.

Edit: Using mcgrailm's answer, I ended up using the following code:

$('.taskStatus').each(function() {
  if ($(this).text() == 'Done') $(this).html("<a href='blah.com'>Click Here</a>"); 
});

Answer 1

because the text() expects a string

so you could do

   $('.taskStatus').each(function(){
    if($(this).text()== 'Done')  $(this).text("<a href='blah.com'>Click Here</a>");
   });

EDIT

you should change this line

 if (oldcontent == "Done") return "<a href='blah.com'>Click Here</a>";

to

if (oldcontent == "Done") return '<a href="blah.com">Click Here</a>'