[英]How to get div inside div using appendTo?
I have the following JS code and I cannot get specified div
look using appendTo
.我有以下 JS 代码,但无法使用
appendTo
获得指定的div
外观。
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>
I don't even get why use parseHTML() for this task...我什至不明白为什么要使用 parseHTML() 来完成这个任务......
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);
}
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.