Как обернуть все созданные через for span в div на чистом JS Es6?

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('pips').insertAdjacentHTML('afterbegin',
        `<span class="pip">
            <img class="imageThumb" src="${e.target.result}" title="${file.name}"/>
                <br/>
            <span class="remove">Удалить</span>
         </span>`
      );

      document.getElementById('pips')
        .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 id="pips"></div>
</div>

    let div = document.createElement('div'); // Создаём div
    div.className = 'pips'; // Задаём ему класс
    document.getElementById('photos').addEventListener('change', function(e) {
        let photos = e.target.files,
            photosLength = photos.length;

        let del; // Объявляем переменную

        let fileReader = new FileReader();
        for (let i = 0; i < photosLength; i++) {
            let f = photos[i];
            fileReader.readAsDataURL(f);
        }
        fileReader.onload = (function(e) {
            let file = e.target;

            let photo = document.createElement('span'); // Создаём спан
            photo.className = 'pip'; // Указываем класс
            let img = document.createElement('img'); // Создаём элемент картинки
            img.className = 'imageThumb'; // Добавляем класс
            img.src = e.target.result; // Добавляем src
            img.title = file.name; // Добавляем название класса
            let del = document.createElement('span'); // Создаём ещё спан для кнопки
            del.className = 'remove'; // Указываем класс
            del.innerText = 'Удалить'; // Указываем текст кнопки

            photo.appendChild(img); // Добавляем в спан photo элемент картинки
            photo.appendChild(del); // Добавляем в спан photo элемент кнопки удаления
            div.appendChild(photo); // Добавляем в div спан photo
            del = document.getElementsByClassName('remove'); // Получаем элементы для удаления
            for (let z = 0; z < del.length; z++) {
                del[z].addEventListener('click', function () { // При  нажатии на кнопку
                    this.parentElement.remove(); // Удаляем элемент
                })
            }

            });
        document.getElementsByClassName('field')[0].appendChild(div); // Добавляем в документ div
    });

    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;
    }
    .pips {
        display: inline-block;
    }

<div class="field" align="left">
    <h3>Upload your images</h3>
    <input type="file" id="photos" name="files[]" multiple />
</div>