要素を別の要素に追加する - jquery、html、append

私は動的に構築しています <div> 子要素を持つ。子要素の1つは、ロードイベントが必要な画像です。私がしようとしているとき .appendTo() その <div> 画像は追加されていません。私は、各要素をFirebugで見ることができます（contentItem そして $img）存在するが追加されていない。

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;
};

回答：

私はちょうど文字列であるcontentItemを返していました。追記していたとき $img に $(contentItem) 文字列を変更することはできませんでした。

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();
};