See it in action at: Loading images with XML & jQuery

$(document).ready(function() {
    $.get(''myData.xml'', function(d) {
        $(''#list'').append(''<dl id="list1dl" />'');

        $(d).find(''book'').each(function() {
            var $book = $(this);
            var title = $book.attr("title");
            var linkurl = $book.attr(''linkurl'');
            var imageurl = $book.attr(''imageurl'');

            var html = ''<dt><img class="bookImage" alt="whatever" src="'' + imageurl + ''" /> <span class="link"><a href="http://www.site.com/directory/'' + linkurl + ''">'' + title + ''</a></span></dt>'' ;

            // html += ''<dd>'';
            // html += ''<dt class="title">'' + title + ''</dt>'';
            // html += ''<span class="link"><a href="http://www.site.com/directory/'' + linkurl + ''">'' + title + ''</a></span>'';
            // html += ''</dd>'';

            $(''#list1dl'').append($(html));

        });
});

    $.get(''myData2.xml'', function(d) {
        $(''#list2'').append(''<dl id="list2dl" />'');

        $(d).find(''book'').each(function() {
            var $book = $(this);
            var title = $book.attr("title");
            var linkurl = $book.attr(''linkurl'');
            var imageurl = $book.attr(''imageurl'');

            var html = ''<dt><img class="bookImage" alt="whatever" src="'' + imageurl + ''" /> <span class="link"><a href="http://www.site.com/directory/'' + linkurl + ''">'' + title + ''</a></span></dt>'' ;

            $(''#list2dl'').append($(html));

        });
    });
});

<?xml version="1.0" encoding="utf-8" ?>
<books>
    <book title="title1" imageurl="http://www.site.com/image1.jpg" linkurl="link1.html"></book>
    <book title="title2" imageurl="http://www.site.com/image2.jpg" linkurl="link2.html"></book>
    <book title="title3" imageurl="http://www.site.com/image3.jpg" linkurl="link3.html"></book>
    <book title="title4" imageurl="http://www.site.com/image4.jpg" linkurl="link4.html"></book>
</books>