Seth Kinast’s Blog

For reasons previously discussed, serving your site up as application/xhtml+xml is a good thing to do. Check that post for all the reasons why.

So now, you’ve taken the plunge and swapped your content-types. Whoa! Why did everything on your site just break? The first reason, of course, is invalid HTML. If you’re getting the Yellow Screen of Death in Firefox, just fix what it asks and you’ll be back on track. However, if your JavaScript suddenly bites it, chances are that you were using methods that are deprecated and no longer supported. You see, when traversing an XML DOM, everything must be viewed in terms of elements. You can’t munge or alter the raw code, because you might generate invalid markup. Instead, you must insert, delete, or change existing elements.

“But but!” you cry. “I used the latest version of jQuery, just like you taught me! And I didn’t use anything but jQuery methods!” Well that’s great, but even jQuery can only do so much. Some of its methods rely on the unsupported innerHTML. So here’s how you fix the issues. Hey, it could be worse; you could have been using document.write!

html() & html(val)

These methods rely on innerHTML. Consider using text() instead to only replace the text inside elements. If you were using html() to copy an element’s contents, try clone(). Finally, if you used html() because you really wanted all the elements inside, use children(). The key is to think of an element’s contents as nodes along the DOM tree, rather than a bunch of tag soup. Is there an <img /> inside your element? Don’t try to copy the HTML somewhere else. Just think, “Hey, I have an image element there. I can query for its src value, which is the important part. Then, I can recreate that image anywhere I want.” Elements are always replaceable– you need only give them back their attributes.

$(“html here”)

This is a slightly lesser-used aspect of jQuery. It’s used to inject raw HTML into the DOM. See a problem? Yep, XHTML+XML doesn’t do raw HTML. Everything is elements! Fortunately, it’s easy to fix this in your code. Instead of $("<img src='muu.png' />"), try using $(document.createElement("img")).attr("src","muu.png"); Not too hard, right?