CODEWITHSUNDEEP
javascriptjqueryappend
Konrad Strek
Konrad Strek

Reputation: 71

How to get div inside div using appendTo?

I have the following JS code and I cannot get specified div look using appendTo.

How I can fix this code to get like in the result below?

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

});

Test

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

Currently I'm getting:

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

I'm trying to get:

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

Upvotes: 2

Views: 79

Answers (1)

Blallo
Blallo

Reputation: 468

I don't even get why use parseHTML() for this task...

I made the solution a little verbose for clarity purposes.

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

Upvotes: 1

Related Questions