This function currently works for appending an img in a div. But I need a replace method instead of multiple img divs stacking on top of each other.

I'm open to solutions in jQuery as well.

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;
}

Thanks in advance for any and all help. Much appreciated!

This function currently works for appending an img in a div. But I need a replace method instead of multiple img divs stacking on top of each other.

I'm open to solutions in jQuery as well.

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;
}

Thanks in advance for any and all help. Much appreciated!

• javascript
• input
• replace

• To replace you just remove the old image after appending the new one. – Barmar Commented Jan 6, 2014 at 20:28
• There's actually a replaceChild method in javascript that seems to fit the bill ? – adeneo Commented Jan 6, 2014 at 20:29
• 1 Change your .appendChild()s to .innerHTML= 'stuff' – SenorAmor Commented Jan 6, 2014 at 20:29

3 Answers 3

Before you append, you can clear out the div, then append the new one

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;
}

Using jQuery

var url = $("#txt").val();
var image = $("<img>").attr("src", url).addClass("img-responsive");
var container = $("<div></div>");

// add the image to the <div> container
container.append(image);
// set the contents of gif-btn
$("#gif-btn").html(container);

... or better yet, you could do a simple fade-out, fade-in...

// replace the last line with this
$("#gif-btn").fadeOut("fast", function() { 
  $("#gif-btn").html(container); $("#gif-btn").fadeIn(); 
});

This can be done directly with replaceChildren (no need for setting innerHTML).

function getImg(){

    let parent=document.querySelector('#gif-btn');
    let oldChild=document.createElement('div');
    oldChild.innerText = 'old child'
    let newChild=document.createElement('div');
    newChild.innerText = 'new child';

    parent.appendChild(oldChild);
    parent.replaceChildren(newChild); // replace with 1+ elements
}
getImg();

<div id="gif-btn"></div>