Как получить div внутри div, используя appendTo?

Question

У меня есть следующий код 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>

Answer 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);
    }
...