Javascript - 替换appendChild元素

时间:2016-07-05 13:09:06

标签: javascript html angularjs image

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内附加图像,并用选择的新图像替换上一张图像,即先用秒替换?

P.S。 img src是从插件js动态生成的,预计解决方案不会使用jquery。

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

您可以使用replaceChilddocumentation)。

  

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])'
}