Question

I have the following function:

<script type="text/javascript">
function changeText(elem){
  var oldHTML = document.getElementById(elem).innerHTML;
  var newHTML = "<span style='color:red'>" + oldHTML + "</span>";
  document.getElementById(elem).innerHTML = newHTML;
 }

</script>

And the following HTML:

<table>
<tr>
<td id = "foo">bar</td>
</tr>
</table>

This throws a “unknown runtime error” (just in IE) which googling has since taught me that table elements are read-only in IE with innerHTML.

I’ve tried finding workarounds but they don’t target my specific problem, which is just that I want to make the word “bar” red. I don’t want to change the word “bar” to something else. Purely a color change.

Is there any way to do this without a complex and slow DOM function and without having to change any of the other HTML markup on the page? This is a table with a form in it, and if the surfer submits the form with an error, the “errored” fields should turn red. It has to be able to execute multiple times because it’s possible for a surfer to mess up more than one field.

Thanks for any advice.

Answer 1

Why not just change the cell to have color:'red' :

var td = document.getElementById(elem);
td.style.color = 'red';