遍历每个xml结果并添加单独的DIV

Question

我正在尝试使用jQuery和XML来创建图像缩略图和标题。我能够将xml数据添加到页面中，但是如何将图像和标题加载到单独的DIV中？

<div id="gDesigns"></div>

$.ajax({
    type: "GET",
    url: "imgs/thumbs/xml/furniture.xml",
    dataType: "xml",
    success: function(xml){
        $(xml).find('designName').each(function(){
            var sTitle = $(this).find('Thumb').text();
            var sPublisher = $(this).find('Code').text();

            $("#gDesigns").append('<div class="tBody" id="' + sTitle + '"> <div class="bImg"> <img src="designs/thumbs/' + sTitle + '.jpg"> <div class="txt">' + sPublisher + '</div> </div> </div>')
        });
    },
    error: function() {
        alert("An error occurred.");
    }
});

我的问题是如何添加每个xml结果如下

<div class="tBody" id="??">
    <div class="bImg">
        <img src="designs/thumbs/??.jpg">
    </div>
    <div class="txt">
        Caption
    </div>
</div>

XML

<?xml version="1.0" encoding="utf-8"?>
<Furniture>
    <designName>
        <Thumb>teakTbl</Thumb>
        <Code>1234</Code>
    </designName>
    <designName>
        <Thumb>mahoganiTbl</Thumb>
        <Code>12345</Code>
    </designName>
    <designName>
        <Thumb>darkTbl</Thumb>
        <Code>97864</Code>
    </designName>
</Furniture>