jquery - 将元素附加到另一个元素

Question

我正在动态构建一个<div>带有子元素的元素。其中一个子元素是我需要为其设置加载事件的图像。当我尝试.appendTo()不<div>附加图像时。我可以在萤火虫中看到每个元素（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;
};

Answer 1

我返回的 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();
};