jQuery XML parsing/manipulation IE8 error

Question

I am loading an XML file using jQuery $.get. after loading the content, i can manipulate it and append the xml nodes to my own elements using .append(). this works on chrome and firefox, but not on IE8.

example of xml file:

<THEMES>
  <THEME id="city">
    <ASSETS ui="game/city">
        <ASSET package_id="title_screen"        file="title_screen.swf" />
        <ASSET package_id="backgrounds"          file="cartoon_buildings.swf" />
        <ASSET package_id="stand"                file="stand.swf" />
    </ASSETS>
  </THEME>  
</THEMES>

I need to detach all of the THEME nodes and attach them to my own object.

here is the essence of my code:

    var themes = $("<themes></themes>");
    $.get('url/themes.xml', function(data, textStatus, jqXHR) {
        var xml = data;         
        themes.append($(xml).children("themes").children('theme'));
    }, 'xml');

The error occurs on the themes.append line only on IE, and this is what the log shows:

No such interface supported

Can i not manipulate and append XML elements on IE?

Answer 1

Try to serialize the fetch XML element in this way:

function xml2Str(xmlNode)
{
  try {
    // Gecko-based browsers, Safari, Opera.
    return (new XMLSerializer()).serializeToString(xmlNode);
  }
  catch (e) {
    try {
      // Internet Explorer.
      return xmlNode.xml;
    }
    catch (e)
    {//Strange Browser ??
     alert('Xmlserializer not supported');
    }
  }
  return false;
}

Answer 2

There are 2 issues:

1. From the docs:

   Query( html [, ownerDocument] )
   html: A string of HTML to create on the fly. Note that this parses HTML, not XML .

2. IE, following the DOM-specification, does not accept the moving of nodes between documents.

This fixes both issues and works for me in IE too:

    //themes will be a jQuery-Object containing the documentElement
    var themes = $($.parseXML("<themes></themes>").getElementsByTagName('*')[0]);

    $.get('url/themes.xml', function(data, textStatus, jqXHR) {
        var xml = $($.parseXML(data));      
        themes.append(xml.children("themes").children('theme'));        
    }, 'text'
);