將元素附加到另一個元素

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