如何在動態添加的包裝div中使用jquery添加圖像和div？

Question

我有一個div，說主div，並使用jQuery，我將包裹的div中的圖像添加到主div。這是爲我想上傳的多個圖像完成的。我完成了。

但現在，我還需要添加一個標籤與圖像一起，並希望有一個更多的包裝div在裏面。我如何實現相同？

$("<img />", { 
     "src": e.target.result, 
     "class": "thumb-image "+imgCls[i] 
}).appendTo(image_holder).wrapAll("<div class='uimg_holder'></div>"); 

這給我：

<div class="image_holder"> 
    <div class="uimg_holder"> 
    <img src="..." /> 
    </div> 
    <div class="uimg_holder"> 
    <img src="..." /> 
    </div> 
</div> 

我想有：

<div class="image_holder"> 
     <div class="uimg_holder"> 
     <img src="..." /> 
     <a href=""></a> 
     </div> 
     <div class="uimg_holder"> 
     <img src="..." /> 
     <a href=""></a> 
     </div> 
    </div> 

我嘗試使用這個沒有成功：

var nhtml="<a href='#'>Close</a>"; 
    $("<img />"+ nhtml , { 
     "src": e.target.result, 
     "class": "thumb-image "+imgCls[i] 
    }).appendTo(image_holder).wrapAll("<div class='uimg_holder'></div>"); 

請幫幫忙！

Answer 1

您可以使用.add()來實現它。

.add()方法從這些元素的聯合和傳入方法構造一個新的jQuery對象。

var image_holder = $('.image_holder') 
 
$("<img />", { 
 
    "src": 'https://i.stack.imgur.com/fYUxi.jpg?s=32&g=1', 
 
    "class": "thumb-image " 
 
    }) 
 
    .add("<a href='#'>Close</a>") //Injected this portion 
 
    .appendTo(image_holder) 
 
    .wrapAll("<div class='uimg_holder'></div>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="image_holder"></div>