将元素附加到另一个元素

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