I am facing an issue in making this code work properly. It functions correctly for my caption element as there is only one caption tag in my HTML. However, the same code does not work for my TR element since it requires a for loop to iterate through multiple TR tags. Can you help me modify this code to make it work for my TR elements as well?
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);
}
Below is the section of the code related to the TR elements:
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));
}