innerHTML after XMLHttpRequest not working on IE9

Question

I have the following black of code which is working perfectly fine on Chrome & Firefox but fails everytime on IE, it returns "undefined" in the console tab.

<html>
<head>
    <script type="text/javascript" charset="utf-8" src="/js/jquery-latest.js"></script>

<script>
$(document).ready(function()
{

test(); 

});


function test()
{

          if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.open("GET","/xml/products.xml",false);
        xmlhttp.send();
        xmlDoc=xmlhttp.responseXML;
        var list = xmlDoc.getElementsByTagName("product");
        console.log(list[0].childNodes[1].innerHTML);

}
    </script>
</head>
</html>

The XML i'm using is the following :

Thanks for your time.

EDIT: jQuery ajax version not working either:

var xmlDoc;     
$.ajax({
    type: "GET",
    url: "/xml/products.xml",
    dataType: "xml",
    success: function (xml) {
        xmlDoc = xml;
                var list=xmlDoc.getElementsByTagName("product");
                console.log(list[1].childNodes[1].innerHTML );
    }
});

Do you really need to touch the native XHR? Why don't you use $.ajax(), you seem to already have jQuery. It levels a LOT of cross-browser quirks, especially with vendor low-level APIs as this! — pid
– pid, Commented Jun 22, 2015 at 13:20
I have exactly the same problem with ajax , i just wanted to try something else — FieryA
– FieryA, Commented Jun 22, 2015 at 13:24
You need to check for the state change before you get the response, check msdn.microsoft.com/en-us/library/dd576252(v=vs.85).aspx — Dave Jones
– Dave Jones, Commented Jun 22, 2015 at 13:25
Be assured the problem lies elsewhere. Revert to jQuery and post that code, someone here will be able to help you. Why would async=false have something to do with CORS? Am I missing something? Those two aspects are totally unrelated in my book... — pid
– pid, Commented Jun 22, 2015 at 13:32
@PatrickEvans ok missed that! But why would you not use async. — Dave Jones
– Dave Jones, Commented Jun 22, 2015 at 13:32

Community · Accepted Answer · 2017-05-23 12:22:19Z

2

No idea why this works in Chrome and FF, it shouldn't actually¹.

You are loading an XML document, and are successfully selecting an XML element node. Those don't have innerHTML properties². You should use an XMLSerializer if you really need to get the markup of your xml document (maybe you're just looking for the .textContent?).

var el = list[0].childNodes[1];
console.log(new XMLSerializer().serializeToString(el));

However, oldIE doesn't even know that, you'll need to use el.xml for them³.

_{1: At least not in older versions. See also does innerHTML work with XML Elements?.

2: Apparently, the DOM Parsing spec now includes a generic innerHTML attribute on all DOM elements

3: see JavaScript: Replacement for XMLSerializer.serializeToString()?}

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Jun 22, 2015 at 13:55

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

FieryA Over a year ago

Thanks for your answer , in IE i have now XMLSerializer is undefined...:/

Bergi Over a year ago

Hm, MSDN claims that IE9 has one…

Collectives™ on Stack Overflow

innerHTML after XMLHttpRequest not working on IE9

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related