Dołączanie elementu do innego elementu - jquery, html, append

Dynamicznie buduję <div> z elementami potomnymi. Jednym z elementów potomnych jest obraz, dla którego muszę mieć zdarzenie ładowania. Kiedy próbuję .appendTo() temu <div> obraz nie jest dołączany. Widzę w firebugu, że każdy element (contentItem i $img) istnieje, ale nie jest dołączany.

var buildContentItem = function (src, caption, date, userName) {
var contentItem =
"<div class="contentItem">" +
"<a href="javascript: void(0);"></a>" +
"<div class="detailsWrapper">" +
"<span class="date">" + date + ": </span>" +
"<span class="userName">" + userName + "</span>" +
"<div class="caption">" + caption + "</div>" +
"</div>" +
"</div>";

var $img = $("<img>", {
load: function () {
console.log("loaded");
images.push($.Deferred(function (promise) {
promise.resolve();
}).promise());
}
}).appendTo($(contentItem).find("a"));
$img.attr("src", src).attr("alt", caption);

return contentItem;
};

Odpowiedzi:

Zwracałem contentItem, który był tylko łańcuchem. Kiedy się dołączałem $img do $(contentItem) nie wprowadzono zmian w łańcuchu. Oto poprawka ...

var buildContentItem = function (src, caption, date, userName) {
var contentItem =
"<div class="contentItem">" +
"<a href="javascript: void(0);"></a>" +
"<div class="detailsWrapper">" +
"<span class="date">" + date + ": </span>" +
"<span class="userName">" + userName + "</span>" +
"<div class="caption">" + caption + "</div>" +
"</div>" +
"</div>";

var $img = $("<img>", {
load: function () {
console.log($(this).position().left);
images.push($.Deferred(function (promise) {
promise.resolve();
}).promise());
}
});
// the fix below
contentItem = $(contentItem).find("a").append($img).parent();
$img.attr("src", src).attr("alt", caption);

return $("<div>").append(contentItem.clone()).html();
};