Loading XHTML fragments over AJAX with jQuery

Question

I'm trying to load fragments of XHTML markup using jQuery's $.fn.load function, but it raises an error trying to add the new markup into the DOM. I've narrowed this down to the XML declaration (<?xml...?>) -- the view works if I return static text without the declaration. I don't understand why this would cause failure, or if the blame lies in jQuery, Firefox, or my code.

How should I insert XHTML fragments into the DOM using jQuery?

---

Using $.get does not work -- the callback receives a Document object, and when I try to insert it into the DOM, I receive the following error:

uncaught exception: Node cannot be inserted at the specified point in the hierarchy (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)
http://localhost:8000/static/1222832186/pixra/script/jquery-1.2.6.js
Line 257

This is my code:

$body = $("#div-to-fill");
$.get ("/testfile.xhtml", undefined, function (data)
{
    console.debug ("data = %o", data); // data = Document
    $body.children ().replaceWith (data); // error
}, 'xml');

---

A sample response:

<?xml version="1.0" encoding="UTF-8"?>
<div xmlns="http://www.w3.org/1999/xhtml">
  <form action="/gallery/image/edit-description/11529/" method="post">
    <div>content here</div>
  </form>
</div>

Answer 1

Try this instead (I just did a quick test and it seems to work):

$body = $("#div-to-fill");
$.get ("/testfile.xhtml", function (data)
{
    $body.html($(data).children());
}, 'xml');

Basically, .children() will get you the root node and replace the content of your div with it. I guess you can't exactly insert an xml document with the <?xml declaration into the DOM...