Html in SharePoint 2010 WebPart Title

I received an interesting SharePoint design today where the WebPart titles had two colors. Ex: the place for News and Announcements

I wasn’t really sure how to accomplish this since SharePoint renders the WebPart titles as simple h3′s with spans in them. At first I thought I’d just type html into the title area. So, I decided to put this in my title: the place for <span> News and Announcements </span>. Then I used css to do my colors: I made the .ms-WPTitle light grey and the .ms-WPTitle span green. But, of course it wasn’t that easy. SharePoint actually wrote out the word “span” instead of rendering it as html: Ex: the place for <span>News and Announcements</span>

At this point I thought I was stuck. I figured I was going to have to add content editor WebParts on top of all my other WebParts just to build titles. It was going to be a pain. But, as I was looking at the underlying html that SharePoint produced, I had an idea. It looked like SharePoint was setting to the html to the actual text literal. So, what if I use javascript to re-write the exact same text? Javascript should write it as html, right?

Anyway, without further ado, here is my javascript. I used jquery (because I have it in my masterpage). I am sure it can be done with regular javascirpt, but this was easier for me.

$(function () {
    //Replace webpart header text with html version
    $('.ms-WPTitle span').each(function () {
        $(this).replaceWith($(this).text());
    });
});

With the above javascript referenced in my MasterPage, it renders any html I put into a WebPart header now. I think it is a pretty interesting trick that could be used for all different kinds of designs.