Using iUI with XHTML

I’m creating an iPhone web application, using the iUI framework to give it a look and feel similar to native iPhone apps.

I came across the need to use SVG drawings; since iUI uses a single page for navigation I had to use XHTML (served as XML) to get the SVG code inline. A couple of errors occurred, due to XHTML not supporting the innerHTML Node property.

The first two fixes were easy, just replace innerHTML with textContent and that was that. But the third fix, where innerHTML is used to swap pages, was more complicated. Here’s what I started with:

var frag = document.createElement('div');
frag.innerHTML = xhr.responseText;

A pretty typical use of AJAX, and here’s how it works in XHTML:

try {
    var frag = document.createElement('div');
    frag.innerHTML = xhr.responseText;
}
catch (e) {
    var parser = new DOMParser();
    var frag = parser.parseFromString('<div xmlns="http://www.w3.org/1999/xhtml">' + xhr.responseText + '</div>', 'application/xhtml+xml');
    frag = frag.documentElement;
}

Once I got that working, I was still getting an error message in Safari’s console:

WRONG_DOCUMENT_ERR: DOM Exception 4: A Node was used in a different document than the one that created it (that doesn't support it).

Turns out I had some plain <br> elements in the response; putting the proper closing slash at the end fixed that right up.