javascript - 根据用户输入替换而不是追加？

Question

此功能目前适用于在 div 中附加 img。但我需要一个替换方法，而不是多个 img div 相互堆叠。

我也对 jQuery 中的解决方案持开放态度。

function getImg(){

    var url=document.getElementById('txt').value;
    var div=document.createElement('div');
    var img=document.createElement('img');

    img.className="img-responsive";

    img.src=url;

    div.appendChild(img);

    document.getElementById('gif-btn').innerHTML=""; <!-- Correct answer -->
    document.getElementById('gif-btn').appendChild(div);

    return false;
}

在此先感谢您提供的所有帮助。非常感谢!

Answer 1

在追加之前，你可以清空div，然后追加新的

function getImg(){

    var url=document.getElementById('txt').value;
    var div=document.createElement('div');
    var img=document.createElement('img');

    img.className="img-responsive";

    img.src=url;

    div.appendChild(img);

    document.getElementById('gif-btn').innerHTML = ""; // <-- Clears the gif-btn div
    document.getElementById('gif-btn').appendChild(div);

    return false;
}