Change The Colour Of The First Word In An H2 Element

I am trying to add some styling to the first word of all of my H2 headings.

Now obviously this would be very easy to do using a span, but let me clarify my situation.

I am working on a Joomla! site, so a lot of my code is read from php and sql files. I thus can't go and wrap my text in a span by hard coding it since it is dynamic and read from a database.

I thus decided that manipulating it using javascript will be the simplest. The only other chice is to write a php script that does pretty much the same thing, but I prefer javascript.

So here is what I am thinking of doing:

I want to select all of the H2 elements from my document, get access to their text content, single out the first word, and then wrap it in a span. The span will have a class, which will then simply be styled using CSS.

I though I was on a roll, but is seems that I have hit a snag. I am able to select and edit a single element with an id, but not all of the H2 elements in my document.

I was using 'getElementById' and assumed I could simply change it to 'selectElementByTagName' at some point.

I then used 'innerHTML' to retrieve and manipulate the contents.

Here is my code so far, and it work to some extent:

Code:

It seems though that 'innerHTML' does not work with 'selectElementByTagName', and I can't seem to find a similar command that does.

I also can't use ID's since I can't manipulate the HTML (at least not without scratching through a whole mess of php). Even then I need to manipulate various elements on one page, so ID's are no good anyway.

So my question finally is this: Is there a similar command I could use, or am I busy going in the wrong direction?