outerHTML undefined in IE

Question

My code gets JSON from an Ajax call, which contains XML, and goes through it reading some information.

Although the parsing of the XML runs fine in Chrome, it does not in IE, since in IE outerHTML returns undefined.

I have gone through several posts and tried several possible solutions with no success.

The JavaScript code is:

$.ajax({
    url: 'getJSONwithXML.do',
    type:'POST',
    data:'',
    dataType: 'json',
    cache: false
}).done(function(data) {
    var jsonResp = JSON.parse(data.data.respuesta);
    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(jsonResp,"text/xml");
    var texto = $(xmlDoc).find('texto').prop('outerHTML');
    console.log(texto); // <--- undefined in IE
    $('body').append('<div>' + texto + '</div>');
});

The xml I get under jsonResp is:

<?xml version="1.0" encoding="UTF-16"?>
<envio>
    <version>1.0.0</version>
    <anuncios>
        <remitente>
            <nodoRemitente>Nodo Remitente</nodoRemitente>
        </remitente>
        <anuncio>
            <emisor>
                <nodoEmisor>Nodo Emisor</nodoEmisor>
            </emisor>
            <metadatos>
                <id>16249</id>
            </metadatos>
            <contenido>
                <texto>
                    <p>
                        Notificación de prueba
                    </p>
                    <p>
                        Notificación de prueba
                    </p>
                    <p>
                        Notificación de prueba
                    </p>
                </texto>
            </contenido>
        </anuncio>
    </anuncios>
</envio>

Under Chrome or Fireforx, texto returns

<texto>
    <p>
        Notificación de prueba
    </p>
    <p>
        Notificación de prueba
    </p>
    <p>
        Notificación de prueba
    </p>
</texto>

which is what I want (the HTML code within texto tag), but in Internet Explorer I get undefined.

I have seen the textContent property but this is not what I want because it is not the HTML code.

Any ideas?

Answer 1

Internet Explorer does not provide the outerHTML property (nor innerHTML) for nodes in an XML document. You can use XMLSerializer (in IE 9+) to work around that:

var node = $(xml).find('texto')[0]; // get DOM node
// Try outerHTML. If not available, use XMLSerializer
var texto = node.outerHTML || new XMLSerializer().serializeToString(node);

You'll note that the texto string may get the xmlns attribute for the root node. But I don't think that will matter for the way you use it.