javascript - div 动态创建，但图像不附加到它

问题描述

我正在创建一个 div 框，它应该保存用户上传的图像（预览）。但是创建了 div，但图像不会附加到它。ID 已分配给 div，但不知何故我无法通过 ID 定位 DIV。我查看了stackoverflow，但没有真正找到有关此问题的任何信息

代码：

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

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

所以我正在寻找：图像应该附加到div(body) 中，以使图像尊重 parent 的高度和宽度div。它可以以各种方式或形状完成。我不必将 ID 用作选择器。只是把它扔在那里，以防你有一个想法涉及选择div元素的不同方式

标签： javascriptjqueryhtml

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

而不是#0做出来#card0

javascript - div 动态创建，但图像不附加到它

问题描述

解决方案

推荐阅读