Подскажите пожалуйста как обернуть все созданные через for span в div на чистом JS Es6?
сейчас выглядет это вот так
<span></span>
<span></span>
<span></span>
а надо чтобы было вот так
<div>
<span></span>
<span></span>
<span></span>
</div>
Скрипт
document.getElementById('photos').addEventListener('change', function(e) {
let photos = e.target.files,
photosLength = photos.length;
for (let i = 0; i < photosLength; i++) {
let f = photos[i];
console.log(f)
let fileReader = new FileReader();
fileReader.onload = (function(e) {
let file = e.target;
document.getElementById('photos').insertAdjacentHTML('afterend',
`
<span class="pip">
<img class="imageThumb" src="${e.target.result}" title="${file.name}"/>
<br/>
<span class="remove">Удалить</span>
</span>
`
);
document.getElementById('photos')
.nextElementSibling
.querySelector('.remove')
.addEventListener('click', function() {
this.parentElement.remove();
});
});
fileReader.readAsDataURL(f);
}
});
input[type="file"] {
display: block;
}
.imageThumb {
max-height: 75px;
border: 2px solid;
padding: 1px;
cursor: pointer;
}
.pip {
display: inline-block;
margin: 10px 10px 0 0;
}
.remove {
display: block;
background: #444;
border: 1px solid black;
color: white;
text-align: center;
cursor: pointer;
}
.remove:hover {
background: white;
color: black;
}
<div class="field" align="left">
<h3>Upload your images</h3>
<input type="file" id="photos" name="files[]" multiple />
</div>
Скрипт в песочнице https://jsfiddle.net/usdbuy/tpnjmhL0/