Как обернуть динамически созданный элемент изображения с помощью JavaScript

Я хочу отображать предварительный просмотр изображения при изменении ввода файла. Итак, я создаю элемент Image с помощью JavaScript и хочу обернуть его внутри div, чтобы отобразить кнопку закрытия. Для этого я написал следующий код:

preview(event, imageList) {
    let imgLen = event.target.files.length;
    if (imgLen > 0) {
        for (let i = 0; i < imgLen; i++) {
            let myImage = new Image(100, 100);
            myImage.src = URL.createObjectURL(event.target.files[i]);
            myImage.setAttribute('style', 'margin: 5px');
            imageList.appendChild("<div>" + myImage + "</div>");
        }
    }
} 

Но я выкидываю ошибку во время выполнения. ошибка Как обернуть динамически созданный элемент изображения с помощью JavaScript

Просто добавлю: вам не нужно условие if (imgLen > 0), поскольку цикл for даже не запустится, если imgLen < 1 и выйдет из строя.

Sivcan Singh 15.09.2018 11:54
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
30
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Использовать этот:

var divNode = document.createElement('DIV');
divNode.appendChild(myImage);
imageList.appendChild(divNode);
preview(event, imageList) {
    let imgLen =event.target.files.length;
    if (imgLen > 0) {
      for (let i = 0; i< imgLen; i++) {
        let myImage = new Image(100, 100);
        myImage.src = URL.createObjectURL(event.target.files[i]);
        let div = document.createElement('div');
        div.appendChild(myImage);
        myImage.setAttribute('style', 'margin: 5px'); 
        imageList.append( myImage);    
      }  
    }

Другие вопросы по теме