Question

I have a page which acts as an AJAX loader using jQuery. It fetches XML documents, like this one, and inserts the values of title, authPhrase and content into appropriate divs in the displayed page.

<?xml version="1.0" encoding="utf-8"?>
<tinglePage>
  <title>Home</title>
  <authPhrase>welcome, Jashank<br /><a href="/tingle/auth/logout">logout</a></authPhrase>
  <content>
    <p>There are <strong>two</strong> types of folks who sit around
    thinking about how to kill people: <em>psychopaths</em> and
    <em>mystery writers</em>.  I'm the kind who pays better.</p>
  </content>
</tinglePage>

When I use this JavaScript, it strips out the tags from the inserted content.

    jQuery.get(path, {ajax: "true"}, function(xml) {
        document.title = "Tingle :: " + $("title", xml).text();
        $(".pageTitle").html(
            $("title", xml).text()
        );

        $(".authPhrase").html(
            $("authPhrase", xml).text()
        );

        $(".content").html(
            $("content", xml).text()
        );
    });

Is there some way to insert the XML into the displayed page without stripping content?

Answer 1

You should wrap the content with a CDATA block. This way when you use .text() you get whole content with html tags;

<?xml version="1.0" encoding="utf-8"?>
<tinglePage>
  <title>Home</title>
  <authPhrase><![CDATA[welcome, Jashank<br /><a href="/tingle/auth/logout">logout</a>]]></authPhrase>
  <content>
    <![CDATA[<p>There are <strong>two</strong> types of folks who sit around
    thinking about how to kill people: <em>psychopaths</em> and
    <em>mystery writers</em>.  I'm the kind who pays better.</p>]]>
  </content>
</tinglePage>

Working example.