JQuery ajax to load XML, not working in IE or Edge

Question

This is the xml that I currently have:

<?xml version="1.0" standalone="yes"?>
<lang>
    <item code="g">ICN<br />HKG</item>
</lang>

Then I use the following code to extract XML content:

$.get("file.xml",function(d){
   $("div").html($(d).find("item:first").html()); 
});

This code works in Chrome, but not in IE. I wonder why that is the case. Of course, I could change html() to text(), which would be working in all browsers, yet that will evaluate to ICNHKG, which is not what I want.

Any ideas what is going on? Much help is appreciated.

Answer 1

About $.get()

According to the Jquery documentation $.get() automatically guesses the content type and in accordance with the datatype it does some form of parsing, in the source code we can find this as:

// Data converters
// Keys separate source (or catchall "*") and destination types with a single space
converters: {

    // Convert anything to text
    "* text": String,

    // Text to html (true = no transformation)
    "text html": true,

    // Evaluate text as a json expression
    "text json": jQuery.parseJSON,

    // Parse text as xml
    "text xml": jQuery.parseXML
},

About $.parseXML()

According to the Jquery documentation, this function uses the browsers native XML-parser, for IE this is called in another way than for the other browsers, as seen here in the Jquery source code, meaning not only that IE uses its another XML-parser than all other browsers, but also that this is one of these this is why we love IE moments:

if ( window.DOMParser ) { // Standard
    tmp = new window.DOMParser();
    xml = tmp.parseFromString( data, "text/xml" );
} else { // IE
    xml = new window.ActiveXObject( "Microsoft.XMLDOM" );
    xml.async = "false";
    xml.loadXML( data );
}

About [object XMLDocument] and innerHTML

If you would try to alert() a XML parsed document you would get [object XMLDocument] as a return. What is an object XMLDocument actually? This means that this is a type of object different from a regular object (wow, didn't see that one coming).

In modern browsers this difference is actually (almost) not present. In IE however, this means that there is no such property as innerHTML. The only thing existing is some form of nodeValue and the regular .textContent, which both destroy the html content. This does however not mean that your br tag is totally impossible to retrieve from the XML, it just isn't that easy, as it is interpreted as a new XML-tag, as you can see with the code below:

$.get("/file.xml", function(d) {
    console.log(d.getElementsByTagName("item")[0].childNodes);
});

Returns this in IE:

Accessing it however is not really easy;

$.get("file.xml", function(d) {
    console.log(d.getElementsByTagName("item")[0].childNodes[1].nodeValue); //returns null
    console.log(d.getElementsByTagName("item")[0].childNodes[1].nodeName); //returns br
});  

In short, the IE XML-parser is not really suitable for html contents. Many, many methods do not exist, which will cause major problems.

Then what should I do?

There are different possible approaches. The first one would just be to specify another datatype and handle it as such:

$.get("file.xml", function(d) {
    $("div").html($(d).find("item:first").html());
},"text"); //Datatype: text

Another possibility would be to use CDATA:

XML

<?xml version="1.0" standalone="yes"?>
<lang>
    <item id="g"><![CDATA[HKG<br />ICN]]></item>
</lang>

Javascript(jquery)

$.get("file.xml", function(d) {
    $("div").html($(d).find("item:first").text());
});