Javascript 动态创建div，但不向其附加映像

我正在创建一个div框，它应该保存用户上传（预览）的图像。 但是，会创建div，但图像不会附加到其中。正在将ID分配给div，但不知何故，我无法按ID将div作为目标。 我已经查看了stackoverflow，但没有找到任何关于此问题的信息

代码：

函数readURL（输入）{
if（input.files&&input.files[0]）{
$（“#图像预览”）.slideUp（）；
对于（var i=0；i

我尝试过使用不同的选择器，尝试过将图像直接插入到正文中（直接附加到正文中），后者确实有效，但图像不关心其父级大小。图像没有边界，采用自己的宽度和高度，而不考虑父级

div

的宽度和高度

因此，我要寻找的是：图像应该附加到

div

（主体）中，以使图像尊重父

div

的高度和宽度。 它可以以任何方式或形状完成。我不必使用ID作为选择器。如果你有一个选择

div

元素的不同方法的想法，就把它扔出去吧

在CSS中，标识符（包括中的元素名、类和ID） 选择器）只能包含字符[a-zA-Z0-9]和ISO 10646 字符U+00A0及以上，加上连字符（-）和下划线 (_); 它们不能以数字、两个连字符或后跟一个连字符开头 一位数

不要做

#0

而是做

#card0

function readURL(input) {

    if (input.files && input.files[0]) {

        $('#imagePreview').slideUp();

        for (var i = 0; i < input.files.length; i++) {

            let reader = new FileReader();

            let card = document.createElement('div');
            card.setAttribute('class', 'card col-md-4');

            let header = document.createElement('div');
            header.setAttribute('class', 'card-header');

            let body = document.createElement('div');
            body.setAttribute('class', 'card-body');
            body.setAttribute('id', i);

            $('#imgUploadBody').append($(card).append(header, body));

            let img = new Image();

            reader.onload = function(e) {
                img.src = e.target.result;
                $('#'+i).append(img);
            }

            reader.readAsDataURL(input.files[i]);
        }
      }
    }