innerHTML and createContextualFragment problems when Firefox renders XHTML

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();
            
range.selectNodeContents(div_preview);
range.deleteContents();

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

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.