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.

Posted 15th June 2003 at 12:04 pm

10 comments

Wait a minute, so in createElementNS, the NS stands for NameSpace?? I assumed it stood for NetScape. Argh!!! Another reason I hate namespaces.
Keith - 15th June 2003 17:42 - #
You hate namespaces because you assumed something wrongly? That's a bit odd.

Jim - 14th July 2003 18:36 - #
xzc
a - 22nd July 2003 09:21 - #
hmm.. I do not understand. I use createElement() for several webapps which I primarily develop and test in Mozilla, the target user uses IE which I test throughly (aha :) just before release, I have not seen, nor been reported a problem by using the createElement() DOM, Cheers, Julio
Speedbird - 10th December 2003 20:50 - #
Speedbird... If I understand Simon correctly, to exprience the breaking of document.creatElement, you have to be serving your page as true xhtml via the application/xhtml+xml MIME Type. (server-side content negotiation is reqired for this to work in the real world) Otherwise, no matter how valid your markup, the client is not experiencing your page as xml, but as HTML tag soup. IE has no choice, as it does not accpet the application/xhtml+xml MIME Type. Kinda weird cuz XML is the one standard that Microsoft has seemed to truly put it's weight behind and advocate unlike most other standards.
Tod - 13th December 2003 16:29 - #
-- This is funny --- Wait a minute, so in createElementNS, the NS stands for NameSpace?? I assumed it stood for NetScape. Argh!!! Another reason I hate namespaces. -- And tragically idiotic ---
Pedram - 3rd December 2005 01:20 - #
Seems that this has been fixed in recent versions of Mozilla. createElement() works now when serving pages as application/xhtml+xml
Tom - 20th March 2006 17:21 - #
I am using document.createElement("name"); in my javascript. It works fine in mozilla but not in IE 6 sp1. Any suggestions:- Akhil
akhil - 17th May 2006 15:05 - #
[quote]I am using document.createElement("name"); in my javascript. It works fine in mozilla but not in IE 6 sp1. Any suggestions:- Akhil[/quote] Probably because IE6 doesn't understand what a name tag is, because there isn't one.
jtillwick - 18th June 2006 21:57 - #
Realize first that the non-namespace DOM functions are XML DOM 1; whereas, the namespace DOM functions are XML DOM 2. This is the source of the problems.

Internet Explorer does not properly understand the application/xhtml+xml MIME type, so the only way to get a XHTML document to display as something other than a pretty node tree is to send it to IE as text/html. Now, IE sees this MIME type as figures that the document is HTML 4.01--which does not have namespaces. This is why createElementNS doesn't work correctly in IE. Internet Explorer has no clue what javascipt is talking about when it starts working with namespaces.

Mozilla/Firefox, on the other hand, does understand the application/xhtml+xml MIME type, so XHTML should be served as such to it. However, XHTML does have namespaces. Remember that all XHTML documents must have a xmlns="http://www.w3.org/1999/xhtml" attribute in the html element. As such, page developers should use createElementNS, so that way it attributes the elements to the proper namespace.

Now, createElement is now considered depreciated by the W3C in terms of use with XML, and should only be used in environments where namespaces have no meaning. That would be HTML, or in XML documents that do not have namespace declarations. This is probably why Mozilla added the compatibility into its browsers. Still, using createElement in a XHTML document that is served as application/xhtml+xml is technically incorrect because XHTML always has namespaces.

Wake - 17th August 2006 01:42 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/06/15/javascriptWithXML

Simon Willison’s Weblog

Javascript, the DOM and application/xhtml

10 comments