如何使用appendTo在div中获取div？答案

【问题标题】：How to get div inside div using appendTo?如何使用appendTo在div中获取div？
【发布时间】：2019-03-31 08:03:26
【问题描述】：

我有以下 JS 代码，但无法指定 div 使用 appendTo 查找。

如何修复此代码以得到如下结果？

$(function(){

  var imagesPreview = function(input, placeToInsertImagePreview) {
    if (input.files) {
      var filesAmount = input.files.length;
      for (i = 0; i < filesAmount; i++) {
        var reader = new FileReader();
        reader.onload = function(event) {
          $($.parseHTML('<div class="r_img_con">' + ('<img>'))).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
          $($.parseHTML('<div class="r_img">')).appendTo(placeToInsertImagePreview);
        }
        reader.readAsDataURL(input.files[i]);
      }
    }
  };
  $('#gallery-photo-add').on('change', function() {
    imagesPreview(this, 'div.al_output_image');
  });

});

测试

<input type="file" name='upload' class="upload" accept="image/*" id="gallery-photo-add" multiple/>
<div class="al_output_image"></div>

目前我得到：

<div class="r_img_con" src="data:image/...">
  <img>
  </img>
</div>
<div class="r_img"></div>

我想得到：

<div class="r_img_con">
  <img src="data:image/...">
  <div class="r_img"></div>
</div>

【问题讨论】：

你能说出placeToInsertImagePreview是什么吗？是 ID 还是引用？
@TechYogesh 现在看看。
好像这个应该用jQuery标记。
这 (stackoverflow.com/a/11152351/10411270) 可能会帮助您更好地了解您需要传递选择器而不是对象引用。

标签： javascript jquery append

【解决方案1】：

我什至不明白为什么要为这个任务使用 parseHTML()...

为了清楚起见，我将解决方案写得有点冗长。

...
reader.onload = function(event) {
      var $firstDiv = $('<div/>',{
        class: 'r_img_con',
      });
      var $img = $('<img/>', {
        src: event.target.result,
      });
      var $subDiv = $('<div/>', {
        class: 'r_img',
      });
      $firstDiv.append($img).append($subDiv).appendTo(placeToInsertImagePreview);
    }
...

【讨论】：