Javascript - 替换appendChild元素

Question

JS代码

watermark([scope.videoSnapshotPath, scope.watermarkLogoPath])
    .image(myPositionFunction(scope.watermarkPosition))
    .then(function (img) {
    document.getElementById(scope.watermarkPosition).appendChild(img);
})

当用户选择第一张图片时，结果如下

输出

<div data-water-mark="" id="lowerRight" class="col-lg-9 col-md-6 col-sm-6 col-xs-12 padding-l-0">    
    <img src="data:image1/png;base64"> //first image
</div>

当选择任何其他图像时，第一个图像不会被第二个图像替换，而是会被附加。

<div data-water-mark="" id="lowerRight" class="col-lg-9 col-md-6 col-sm-6 col-xs-12 padding-l-0">    
        <img src="data:image1/png;base64"> //first image
        <img src="data:image2/png;base64"> //second image
</div>

如何在 div 中附加图像并用所选的新图像替换前一个图像，即用第二个替换第一个图像？

附注img src 是从插件 js 动态生成的，预计无需使用 jquery 即可解决。

Answer 1

您可以更改 src，而不是附加新的。

$("#my_image").attr("src","data:image/png;base64");