InnerHTML not updating properly

Question

I am trying to create a basic validation of an HTML form in Javascript. My form is stored in a table, and I have an additional column to the right of each input with the identifier "ErrorX", which is initially filled with some text to show it the required field.

<FORM NAME="ContactForm" METHOD=POST ACTION='Order3.php' onsubmit="return validateForm()"> <TABLE> <TR> <TD ALIGN=LEFT>Your name:</TD> <TD ALIGN=RIGHT><INPUT TYPE=TEXT ID="Field1" NAME="Field1"></TD> <TD ALIGN=LEFT ID="Error1">Required</TD> </TR> </TABLE> <input type=submit value='Confirm ->'></FORM> 

When the submit button is clicked, I have a code that checks the fields and tries to change the rightmost column text. The line of code that does this:

 document.getElementById("Error1").innerHTML = "ERROR"; 

The code executes and correctly detects the error, and the existing wording is deleted, but the new text is not displayed. If I request the value of document.getElementById ("Error1"). InnerHTML, I get the correct text, but it does not appear on the screen.

I use Safari v5.1.2, and it works with basic examples that I copied from the Internet, so I think this is my code, not the browser.

Answer 1

innerHTML works in safari. See This Demo http://jsfiddle.net/zxMKM/

The obvious reason is that your html markup is invalid and the browser does its own error recovery and creates its own DOM in the process.
So please confirm your html http://validator.w3.org/

Also note that td.innerHTML is read only for IE8.
So its more cross platform friendly to use td.innerText

Answer 2

I had a similar issue on iPAD safari, it does not update the div value correctly. I went through many posts and tried out many options, but text () works for me .

Answer 3

 <td align="left"><div id="Error1">Required</div></td>