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>

選擇任何其他圖像時， first一幅圖像不會替換為second幅圖像，而是會被附加。

<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內附加圖像，並用選擇的新圖像替換先前的圖像，即用第二個圖像替換第一個？

PS img src是從插件js動態生成的，並且無需使用jquery就可以實現解決方案。

Answer 1

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

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

Answer 2

您可以使用replaceChild （ 文檔 ）。

parentNode.replaceChild(newChild, oldChild);

 var div = document.querySelector("div"); var newImg = document.createElement("img"); newImg.src = "http://placehold.it/400x150"; var swap = function(img) { div.replaceChild(img, div.children[0]); } document.querySelector("button").addEventListener("click", swap.bind(null, newImg)); 

 <div> <img src="http://placehold.it/200x150"> </div> <button>replace</button> 

在您的代碼中：

function (img) {
  var parent =  document.getElementById(scope.watermarkPosition);
  parent.replaceChild(img, parent.children[0])'
}