如何使用Javascript将变量添加到HTML中

Question

我想在我的Javascript中添加也可以进入html的ID，因此我可以将ID分配给onclick remove.Div中包含未在数据库中上传的图像。基本上是一个带有小按钮的预览，将“ x”标记为delete。x会自动删除onclick，但我想删除x所在的div，因此我需要ID，以便可以删除Image +“ x”。 除了进入新创建的Divs的ID外，我已经进行了所有设置，因此我可以为此做好删除动作。

我试图在.div中添加带有.html的变量，但我无法在其中分配ID。 它说未分配变量。

JS：

  $(function() {
    // Multiple images preview in browser
    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) {

                    $('<div class="previewdeleter position-relative" data-item-id-div="[i]" style="height:200px;width: 200px; display: inline-block; position: relative !important;">' +
                        '<img alt="" src='+event.target.result+' style="height:200px;width: 100%; display: inline-block;">' +
                        '<div class="position-absolute" style="top: 0;right: 0;">' +
                        '<img src="/x.png" class="image-deletepreview" style="height: 20px; display: inline-block;"></div></div>')
                        .appendTo(placeToInsertImagePreview);


                    $('.image-deletepreview').on('click', function(e) {
                        e.preventDefault();
                        var deletepreview = $(this).remove();
                        console.log(deletepreview);

                    });

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

        }


    };

HTML：

<div id="previewHolder" data-item-id-div="[i]" multiple=""  class="previewdeleter position-relative">
                    <div class="position-absolute delete-image">
                    </div>
                </div>

Answer 1

您的问题令人困惑，但是根据我的说法，您可以使用DOM创建元素并添加ID，

const div = document.createElement('div');
div.id = 'myid';

Answer 2

基本上我只是更改了代码：

                    var deletepreview = $(this).remove();

至 ：

                        var deletepreview = $(this).parent().parent().remove();

我所做的是代替ID，而只是将要删除的图像的父项。 在这种情况下，我必须向上走2个父母，因为我彼此之间有2张图像。