在浏览时编辑图像

Question

我有这个代码，当我点击编辑图标时，它会在现有图像下面添加一个新图像。我希望新图像替换现有图像。

我知道我必须在div中使用index属性，但需要帮助才能这样做。 在这里添加代码：

addImage = function(event){
var parent = event.currentTarget.parentNode.parentNode.parentNode,
            index = parseInt(parent.getAttribute('index')),
            script,
            clone = imageView.cloneNode(true),
            files = event.target.files;
        for (var i = 0,
                f; f = files[i]; i++) {

            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }

            var reader = new FileReader();

            // Closure to capture the file information.
            var imageBot = clone.querySelector('[name=imageBot]');
            if (imageBot)
                imageBot.innerHTML = '<svg style="position:absolute; top:45%;left:50%" class="spinner" width="25px" height="25px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">' + '<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>' + '</svg>';
            clone.querySelector('.welcome-pane-user-content').setAttribute('data-type', 'image');

            setViewByIndex(index, clone.children[0]);
            document.querySelector('[name=insertOverlayView]').classList.add('hide');
            reader.readAsDataURL(f);
        }
};

这是普通的javascript。请不要Jquery。