How do I get a CSS class to show up in my javascript with my previous method?

Question

I am having trouble getting this to work. The class works for my caption (Because there is only one caption tag throughout my HTML). It doesn't work for my TR tag because for it to work I have to use a for loop. Here is my code that works for caption, how would I get it to work for my TR?

window.onload = function() {

    var caption = document.getElementsByTagName("caption");
    var oldCaption = caption[0].innerHTML;
    var newCaption = "CAPTION";

    var span = document.createElement('span');
    var text = document.createTextNode(newCaption);
    span.appendChild(text);
    span.className = "hoverNode";
    caption[0].appendChild(span);
}

Here's my TR section:

var tr = document.getElementsByTagName("tr");

for (i = 0; i < tr.length; i++) {

    var newTR = "TR";

    tr[i].removeChild(tr[i].firstChild);
    tr[i].appendChild(document.createTextNode(newTR));
}

Answer 1

Do it the same way as for the single caption. Create a span in the loop, and give it the class you want.

for (i = 0; i < tr.length; i++) {

    var newTR = "TR";
    var span = document.createElement('span');
    var text = document.createTextNode(newTR);
    span.appendChild(text);
    span.className = "hoverNode";

    tr[i].removeChild(tr[i].firstChild);
    tr[i].appendChild(span);
}