CODEWITHSUNDEEP
javascriptjqueryxmlinternet-explorer-9
Hyperion
Hyperion

Reputation: 1173

IE 9 :: Display XML code into a Div with Javascript

I've been trying to display my XML code into a Div with Javascript but in the Internet Explorer won't work as follows: 

$('footer #xml_content').val($parsed.find('poem').html());
$('div#explanation').html($parsed.find('explanation').html());

Although it does works with the functions below as text() but the XML tags won't display:

$('footer #xml_content').html($parsed.find('poem').text());
$('div#explanation').html($parsed.find('explanation').text());

Can anyone can figure out this puzzle? Thank you!

function go_poem(pnum, poem, live, id_timer1, id_timer2, reset) { 
    $.ajax({ 
        type: "GET", 
        url: _list_poems[ parseInt(pnum)-1 ], 
        dataType: "xml", 
        success: function (xml) { 
            var $parsed = $(xml); 
            var $texto = $parsed.find("texto"); 
            $('footer #xml_content').html(
                document.createTextNode( $('poem').html() )
            );
            $('div#explanation').html(
                document.createTextNode( $('explanation').html() )
            );
/* Remainder of code not included */

Upvotes: 1

Views: 164

Answers (2)

Sampson
Sampson

Reputation: 268344

Updated Answer

After speaking with the OP in a chat, we settled on the following pattern:

var box = $("<div></div>");

$("footer #xml_content").html(function () {
    box.html( $parsed.find("poema").clone() );
    return box.html();
});

Due to permission restrictions we had to add the XML node to a temporary node and then return the html of the temporary, unattached, node.

Original Answer

Create a textNode from the XML:

document.createTextNode( $parsed.find('poem').html() );

Note however that your markup may not be exactly what you wrote to begin with. I've created a small fiddle to demonstrate this approach, as well as included some invalid markup at the end for demonstration purposes.

The browser is will attempt to repair/re-arrange elements and attributes. As a result, what you retrieve from $.fn.html may not reflect what was given to the parser to begin with.

http://jsfiddle.net/jonathansampson/zvxj3yh4/

Upvotes: 1

dave
dave

Reputation: 4104

You have to escape all <> with &lt; or &gt; if you actually want to display those tags as text.

Upvotes: 1

Related Questions