innerHTML and createContextualFragment problems when Firefox renders XHTML

by vivin

If any of you use Firefox, then you’ll have noticed that the “Preview Comment” feature doesn’t work anymore. It stopped working after I converted this site over to XHTML. Initially it worked (even though it validated as XHTML 1.1) because I was setting the mime-type to text/html. To make it completely compliant, I set the mime-type (for browsers that accept it) to application/xhtml+xml. This made certain things break in Firefox. Namely, innerHTML. HTMLElement.innerHTML isn’t a W3C standard anyway, so it would make sense that it wouldn’t work. However, it was not so much an error as it is a bug in Mozilla (or in Gecko).

I looked around for some alternatives and chanced upon the createContextualFragment function. It is supposed to work, but I guess those examples were for Firefox when it didn’t support the innerHTML property in HTML. I tried something like this:

var range = div_preview.ownerDocument.createRange();

var fragment = range.createContextualFragment(comment); //<-- will crash here

But that didn’t work either. I then found out that this is also a bug. I’ve got two pages demonstrating the bugs here and here.

I don’t have any other alternatives than to

  • Wait for Firefox 1.1
  • Parse the code I want to insert through an XML parser, and then create the objects through DOM Core methods

I figure I’ll try the option b for now, but I don’t know how the slow the parsing will be. I guess I won’t know until I try.