Javascript replace help

I'm trying to use javascript to change a few bits of text on a checkout page for a shopping cart that I'm stuck using.

I got the following that works for the few pieces that are labeled with IDs. The problem is that one of the pieces I want to change is a class, an开发者_如何学JAVAd I can't seem to get it to work.

Any help on getting the following to work for a class? Thanks

window.onload = function() {
    var str = "Price per Unit";
    el = document.getElementById('pricePerUnit');
    el.innerHTML = str;
    var date = new Date();
    var hours = date.getHours();


    if (hours >= 0 && hours < 24) {
        el.innerHTML = str.replace("Price per Unit", "Price");
    }
}

edit: here is the code that I'm trying to change, basically I want to change the $30 to say $30+$5/mo, there is only one element for that class

<td valign="top" align="center" class="unitprice">
<font size="2" face="Arial, Helvetica, sans-serif" color="">$30.00</font></td>

---

Getting elements by class name isn't as easy in JavaScript as getting elements by ID. Some browsers have a couple of functions to help, but not all. The first function is getElementsByClass, which is supported in Firefox 3 and recent versions of Chrome, Safari and Opera. However, it's not supported by IE 8 and lower. There's also querySelector and querySelectorAll, which will fetch one or all items (respectively) that match a CSS selector. These are supported by most browsers including IE 8, but not IE 7 and lower.

Your best bet is to use a library like jQuery or Prototype that implements DOM queries for you. If you don't want to do that, the only cross browser solution is to iterate through all "potential" elements and check the className property of each one for the class you're looking for. The code for this will vary depending on where the elements are placed, which tags might have the class name, etc.

---

To give you some code to work with (but all credits to Andy E's answer):

var element;
var cls = 'unitprice';

if(document.querySelector) {
    element = document.querySelector('.' + cls)
}
else if(document.getElementsByClassName) {
    element = document.getElementsByClassName(cls)[0];
}
else {
   var tds = document.getElementsByTagName('td');
   for(var i = tds.length; i--;) {
       element = tds[i];
       if(element.className == cls) {
           break;
       }
   }
}

element.children[0].innerHTML += "+$5/mo";

(Side note: I'm using children[] here because firstChild might return an empty text node. If you are sure that there is no empty text node before the font element (if you can remove it anyway and use classes to style the content), you can also use firstChild instead (you can test on the console what element.firstChild gives you). children[] is not supported by Firefox 3.0 though)

This only works under the assumption there is really only one element in the whole document with that class.

Check out also the comments given to the other answers. If you want to select more elements or have more difficult selectors, definitely go with a library.

If you know the ID of an ancestor of that table cell (like the table itself) then you can improve searching for that element, be getting the ancestor first.

---

Could you use JavaScript getElementsByClass function