Simon Willison’s Weblog

Javascript, the DOM and application/xhtml

One of the side-effects of switching my blog to serving pages as application/xhtml+xml to browsers that support it (mainly Gecko engine browsers) was that my blockquote citations script simply stopped working in those browsers. The reason this happened is touched upon by Mark Pilgrim in The Road to XHTML 2.0: MIME Types: essentially, when dealing with XML documents Gecko needs you to use document.createElementNS in place of document.createElement when manipulating the DOM.

I fixed this by replacing all occurrences of document.createElement(elementName) with document.createElementNS('http://www.w3.org/1999/xhtml', elementName), thinking this would be an end to the problem. Unfortunately, this broke the script in IE 6, a problem which I didn’t notice for several weeks as I very rarely use that browser.

I began to receieve repeated reports of a scripting error in IE, so the other day I finally got round to looking in to it and realised it was failing on the call to document.createElementNS. Once I’d figured that out, the solution to the problem was a little bit of object detection:

function createElement(element) {
  if (typeof document.createElementNS != 'undefined') {
    return document.createElementNS('http://www.w3.org/1999/xhtml', element);
  }
  if (typeof document.createElement != 'undefined') {
    return document.createElement(element);
  }
  return false;
}

By replacing my calls to document.createElementNS with a call to my new createElement function, I finally got the script working in both browsers. It should work in other modern DOM supporting browsers as well.