Question

I’m getting some POST data via AJAX as XML, and am trying to load it into a textarea using jQuery, and am running into some problems.

The XML looks like this (stripped down, showing only the problem elements):

<Entry>
    <Title>A <i>Title</i> with italics.</Title>
    <Abstract>An abstract, which <i>also</i> may have italics</Abstract>
</Entry>

I’ve converted this XML into a jQuery object using $dom = $(xml), where xml is the XML string above. For some reason, jQuery seems to be inconsistent about .text() versus .html(). I think the problem has to do with an HTMLCollection (that’s what logging the object shows), but I’m not sure.

$dom.find('Title').text(); works as I want it to, turning title into “A <i>Title</i> with italics.” Doing the same thing on the abstract ($dom.find('Abstract').text()) strips the <i> tags entirely, resulting in “An abstract, which also may have italics“.

Frustratingly, doing thing with .html() isn’t consistent either!

$dom.find('Title').html();    #=> 'A <Title>, with italics'
$dom.find('Abstract').html()  #=> 'An abstract, which <i>also</i> may have...'

Any ideas as to what the problem is? The XML is untyped, though I don’t think that should make a difference. Thanks!

Answer 1

As you say html() won’t work with XML & <title> works with .text() because its a known DOM element, rename the tag to something else & the inner HTML will be stripped as with <abstract>.

You can enclose the node values that contain HTML in CDATA sections & use parseXML();

var xml = "<Entry><Title><![CDATA[A <i>Title</i> with italics.]]></Title><Abstract><![CDATA[An abstract, which <i>also</i> may have italics]]></Abstract></Entry>";

$dom = $($.parseXML(xml));
alert( $dom.find('Title').text() );
alert( $dom.find('Abstract').text() );