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

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'
);