bug 391 - IE is strict in setting innerHTML but not appendChild

Issue: #391
Affects: IE6, IE7, IE8, IE9 PP3

IE is well known historically as a browser that doesn't follow the strictness of standards well. IE will often let you do things that you shouldn't be able to do (e.g. add a div to a select element)

However there are cases where IE is very picky - although confusingly arbitrary in how and when it decides to be strict.

Take for example the <p> element. By definition, this is an inline element which means it should not contain block elements.

The following however seems to work fine in all browsers (e.g. the "rule" isn't strictly enforced")

Example:

<script type="text/javascript">
  var newHeading = document.createElement('h1');
  newHeading.appendChild(document.createTextNode('I am an H1 element!'));
  myParagraph.appendChild(newHeading);
</script>

However in IE, if you change this to use .innerHTML to set the value IE throws an error.

Example:

<script type="text/javascript">
  var newString = '<h1>I am an H1 element!</h1>';
  try {
    myParagraph.innerHTML = newString;
  } catch(ex){
    alert('Failed: ' + ex['message']);
  }
</script>

Which IE then throws an error with the very helpful "Unknown runtime error" message.

This is repeatable for any block level elements: div, h1, h2, h3, h4, h5, h6, blockquote etc.

This obviously isn't desired markup thus the issue with the error is minor however it could well crop up when you adding either content you are not intimately familiar with (JSON response?) or you know the content but are not aware the container element you plan to drop it into is actually an inline element.

Keep this in mind the next time you encounter an "Unknown runtime error" as it might turn out to be a "known issue" ;-)

Known Workarounds: Two. Either ensure you never try to set the innerHTML of an inline element to a block element or use the appendChild() method instead.

Related Issues: None.

Bug/Site Feedback | Submit a bug

bug 171 - dynamic table DOM gotcha in IE

Issue: #171
Affects: IE6, IE7, IE8

When HTML first came out, the HTML Table was a simple element consisting of a <table> tag, with n <tr> tags, each with n <th> or <td> tags in it.

The specification grew, to include a tag called <tbody> (among others) to help group sets of rows within a table.

Browsers allowed for both implementations, either with the optional tbody section or not.

However Internet Explorer did something strange... they actually started to follow the spec (even though they miss the mark almost everywhere else).

In IE using the DOM, if you try to add <tr> elements to a <table> using the .appendChild() method, you MUST add a <tbody> section first. IE will not throw any errors if you do not, but it will also not render any rows/cells in your table either.

Known Workarounds: One. Always add the tbody section, and be sure to expect it when navigating this table in the DOM later on.

Related Issues: None.

bug 142 - appendChild doesn't work on a script tag in IE

Issue: #142
Affects: IE6, IE7, IE8 Beta 1, IE8 Beta 2, IE8 PR1, IE8 RC1

Using the DOM to generate elements is ideal, but when you want to generate a script tag, you can't use the DOM in IE.

Example:

<script type="text/javascript">
  var scriptTag = document.createElement('script');
  scriptTag.appendChild( document.createTextNode('var now = new Date();alert(now.getTime());') );
  var bodyTag = document.getElementsByTagName('body')[0];
  bodyTag.appendChild( scriptTag );
</script>

In all browsers except IE, this will append a script element to the page, with code as the content.

Known Workarounds: One. For IE, we have to divert from the spec., and use the .text property instead.

Example Workaround Code:

<script type="text/javascript">
  var scriptTag = document.createElement('script');
  scriptTag.text = 'var now = new Date();alert(now.getTime());';
  var bodyTag = document.getElementsByTagName('body')[0];
  bodyTag.appendChild( scriptTag );
</script>

Related Issues: None.