What is the better way to include dynamic content via ajax?

Question

Is it a better practice to retrieve only data from a (java) backend in xml or json format and use javascript to create the display elements (i.e. div, span, etc.) and insert the data into to them or is it better to retrieve and insert a complete "view" (data and html created by the backend)?

For example, let's say we have the following list and when a list item is hovered over the subsequent "div" displays dynamic data (see below). Is it better to just get the data, and then use js to create the "ul" and "li" elements and then insert the data into them or is it better to get the data and html combined view and insert that into the div?

<ul>
<li>Bob</li>
<li>Tom</li>
<li>Jon</li>
</ul>

<div id="dynamic_content">
<!-- retrieve data/content below -->
<ul>
<li>Bob's info</li>
<li>Hobbies: .....</li>
<li>Education: ....</li>
</ul>    
</div>

Answer 1

Have a look at the jQuery .load method (http://api.jquery.com/load/) where to replace the HTML of a div you'd use:

$('#content').load('/path/to/web_server_returning_html');

Alternatively using the Ajax methods http://api.jquery.com/category/ajax/ you could retrieve some JSON or XML and loop over it creating new HTML elements as needed.