CODEWITHSUNDEEP
internet-explorer-10
user1919511
user1919511

Reputation: 21

HTML parsing in IE10 using java-script changes the HTML structure

IE10 corrupts/changes the HTML hierarchy, it seems. This is better explain with a following sample 

<html>
<head>
<title>IE10 example</title>
</head>
<body>
<script language="javascript">
     function submitForm() {
         var temp;
         temp = document.getElementById("myTable");
         alert(temp.innerHTML);
     }
   </script> 
<table id="myTable">
<thead>
  <tr>
    <td>First Name</td><td>Last Name</td>
  </tr>
</thead>
<tbody >
  <form action="/users" method="post" name="userform">
    <input type="hidden" name="userName">
    <tr>
      <td>admin</td>
    </tr>
    <tr>
      <td>SA</td>
    </tr>
  </form>
</tbody>
</table>
<script language="javascript">
      submitForm()
</script> 
</body>
</html>

If you load the above HTML page into IE10, form node is closed before input node. Hence any access for any input node fails with NULL/undefined error. This HTML loads as expected in Mozilla, Chrome, IE9, IE10-comparability mode.

Is this behavior expected? I appreciate your time & help

Upvotes: 0

Views: 2138

Answers (1)

David Storey
David Storey

Reputation: 30394

This is not unique to IE10. The DOM ends up the same in IE10, Chrome, Opera, and Firefox. All close the form before the input in the test I made by copying the markup you show above:

https://dl.dropbox.com/u/444684/stackoverflow/test.html

The first problem is that you lack a doctype. This will put the browser into quirksmode, which means it wont render to standards and the rules are a lot more grey. For better cross browser consistency you should add a HTML5 doctype at the top of the document:

The next problem is that a form is not allowed to be a direct child of a tbody element. As it is invalid it follows the HTML5 parsing algorithm and closes the form. To avoid this move the form, such as making it a parent of the table.

https://dl.dropbox.com/u/444684/stackoverflow/test2.html

If you look in the browser debugger, such as F12 in IE you'll see the input is now inside the form. You'll also not need your alert anymore as the DOM inspector is a much easier way to debug.

Upvotes: 1

Related Questions