如何在动态添加的包装 div 中使用 jquery 添加图像和 div？

Question

我有一个 div，比如主 div，并且使用 jQuery，我正在将包装 div 中的图像添加到主 div。这是为我要上传的多个图像完成的。我已经完成了。

但是现在，我还需要在图像中添加一个 a 标签，并希望在其中再添加一个包装的 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>