Strange append behaviour with ampersand

Strange append behaviour with ampersand

I have a function that gets xml from the server, via ajax, parses it and appends divs to a dialog. I wrote a stand alone page (serverd from the same server) to test it and it worked fine. However, when I use the function in my app, it chokes because there is an ampersand in the data. Just to be specific, as far as I can tell, from cutting and pasting the source, the stand alone page is identical to the app page. Indeed, that's how I made the standalone page. The error is from:

div.innerHTML = wrap[1] + elem + wrap[2];

on line 6325 of jquery.js (I'm using the latest version).

Both pages get the same xml. When I put an alert before the above code and replace ampersand with XXX,
both alerts show the same string.
It seems that div.innerHTML is changing the ampersand to & in my standalone page but not doing in the app page. I'm stumped. Having said that, I don't know js and this is the first time I've used jquery :)

Below is my function, fwiw:

  1.     function create_dialog ( ) {

            var new_dialog = $('<div id="new_dialog"/>');

            new_dialog.dialog({ autoOpen: true, modal: true, open: foo, height: 400 });

            function foo() {

                $.ajax({
                    url:      'http://localhost:8010/ecomm/?ajax=1&state=pop_pl_cst',
                    cache:    false,
                    success:  success,
                    dataType: 'xml',
                    error:    function(jqXHR, textStatus, fred ) {alert('oops ' + textStatus);},
                });

                function success(data, textStatus, jqXHR) {

                    $(data).find('row').each(process_row);
                    function process_row () {
                        console.log($(this).attr('pop_text'));
                        new_dialog.append($('<div>' + $(this).attr('pop_text') + '</div>'));

                    }

                } // success

            }; // foo