JavaScript: Replacement for XMLSerializer.serializeToString()?

Question

I'm developing a website using the Seam framework and the RichFaces AJAX library (these isn't really all that important to the problem at hand - just some background).

I seem to have uncovered a bug, however, in RichFaces which, in certain instances, will cause AJAX-based updating to fail in IE8 (see here for more info: http://community.jboss.org/message/585737).

The following is the code where the exception is occurring:

   var anchor = oldnode.parentNode;

   if(!window.opera 
       && !A4J.AJAX.isWebkitBreakingAmps() 
       && oldnode.outerHTML 
       && !oldnode.tagName.match( /(tbody|thead|tfoot|tr|th|td)/i ) ) {
         LOG.debug("Replace content of node by outerHTML()");
         if (!Sarissa._SARISSA_IS_IE || oldnode.tagName.toLowerCase()!="table") {
         try {
           oldnode.innerHTML = "";
         } catch(e){    
           LOG.error("Error to clear node content by innerHTML "+e.message);
           Sarissa.clearChildNodes(oldnode);
         }
       }
           oldnode.outerHTML = new XMLSerializer().serializeToString(newnode);
   }

The last line (the one with XMLSerializer) is where the exception is occurring in IE. I was wondering if anyone knows of any replacement method / library / etc I could use there (only on IE is fine). Thanks.

EDIT: After doing some further research, it seems that the exception isn't being caused by XMLSerializer not being defined, rather it seems to happen when I try to assign the output from XMLSerializer to the outerHTML property of the oldnode.

This is strange because it works most times but fails in only a couple of scenarios (this piece of the framework seems to be rather important).

Can anyone think of any reason as to when the output from XMLSerializer (which, from the what the debugger shows, look to be quite valid HTML) is nonassignable to the outerHTML property of an element?

The strangest thing is, if I were to clone the element (using cloneNode(true)) and then set the outerHTML, it seems to work.

Answer 1

In IE you can simply use the xml property of the XML node, provided newnode really is an XML node rather than an HTML node:

function serializeXmlNode(xmlNode) {
    if (typeof window.XMLSerializer != "undefined") {
        return (new window.XMLSerializer()).serializeToString(xmlNode);
    } else if (typeof xmlNode.xml != "undefined") {
        return xmlNode.xml;
    }
    return "";
}

oldnode.outerHTML = serializeXmlNode(newnode);

Update following question update

I wouldn't use outerHTML to replace an element. It's not universally supported. Instead, you could use a mix of innerHTML and standard DOM methods as follows:

var tempEl = document.createElement("div");
tempEl.innerHTML = serializeXmlNode(newnode);
oldnode.parentNode.replaceChild(oldnode, tempEl.firstChild);

Answer 2

I've since discovered the reason (a while ago actually). It turns out that IE semi-validates (it'll balk at some errors but ignore others) inserted HTML. It was throwing some 'unknown error' or something similar which was pretty much completely useless since it gave no indication as to what went wrong - just that something went wrong.

In my case, it was because an <li /> was being inserted with a parent . If you're having similar issues, you may want to make sure you're not trying to be too clever with your HTML.