javascript img element insert (replace, not append)

Question

I have the following function:

function displayImage(n) {
   var pic = document.createElement("img");
   pic.setAttribute("src", h[n].imgUrl);
   pic.setAttribute("width", "50");
   l.appendChild(pic);
   //l.innerHTML = "<img src=\"" + h[n].imgUrl + "\">";
};

The above would work fine if it wasn't registered to a button (each time one clicks on a button, a relevant image gets loaded. As it is now, it keeps adding new images, each time I click, which is understandable. What I want is it to clear the content on the div and replace it with the new image. The commented out version in the code above worked fine but it did not give me possibilities to set attributes, which I have to do (I know I could set attributes in css, but in this instance I can't). How would I change it so that each time I run the function, the old img gets replaced with a new one? Thank you

It would be easier to help if we could see the relevant (minimal/"MCVE") HTML, including the <div> where you want to insert this image, and the <img> you want to replace. — David Thomas
– David Thomas, Commented Aug 14, 2015 at 12:21

David Thomas · Accepted Answer · 2015-08-14 12:27:01Z

There are two obvious choices that would address your problem, first I'll look at the one that fulfils the stated requirements, that you want to replace an existing <img> element with a newly-created <img> element:

function displayImage(n) {
   var pic = document.createElement("img");
   pic.setAttribute("src", h[n].imgUrl);
   pic.setAttribute("width", "50");

   // get a reference to the existing <img /> elements within
   // the node you refer to as 'l':
   var existingImage = l.getElementsByTagName('img');

   // if there are any <img> elements found:
   if (existingImage.length) {

       // we navigate to the parent-element of that first <img>
       // and replace that image, using Node.replaceChild(),
       // with the newly-created <img>:
       existingImage[0].parentNode.replaceChild(pic, existingImage[0]);
    }
}

Alternatively we could simply modify the src property, or attribute of the existing <img>:

function displayImage(n) {

   // get a reference to the existing <img /> elements within
   // the node you refer to as 'l':
   var existingImage = l.getElementsByTagName('img');

   // if there are any <img> elements found:
   if (existingImage.length) {

       // we navigate to the parent-element of that first <img>
       // and replace that <img> element's src property:
       existingImage[0].src = h[n].imgUrl
    }
}

Or, we can update the <img> element's src attribute:

function displayImage(n) {

   // get a reference to the existing <img /> elements within
   // the node you refer to as 'l':
   var existingImage = l.getElementsByTagName('img');

   // if there are any <img> elements found:
   if (existingImage.length) {

       // we navigate to the parent-element of that first <img>
       // and replace that <img> element's src property:
       existingImage[0].setAttribute('src', h[n].imgUrl);
    }
}

References:

putvande · Accepted Answer · 2015-08-14 12:24:45Z

3

You could use replaceChild:

function displayImage(n) {
    var pic = document.createElement("img");
    pic.setAttribute("src", h[n].imgUrl);
    pic.setAttribute("width", "50");
    // replace image
    if (l.getElementsByTagName('img').length > 0) {
        l.replaceChild(pic, l.getElementsByTagName('img')[0]);
    } else {
        // append if no previous image
        l.appendChild(pic);
    }
};

answered Aug 14, 2015 at 12:24

putvande

15.3k3 gold badges37 silver badges51 bronze badges

Comments

Domain · Accepted Answer · 2015-08-14 12:18:49Z

0

function displayImage(n) {
   var pic = document.createElement("img");
   pic.setAttribute("src", h[n].imgUrl);
   pic.setAttribute("width", "50");
   l.innerHTML = "";
   l.appendChild(pic);

};

first empty it and then add the image

answered Aug 14, 2015 at 12:18

Domain

11.8k3 gold badges26 silver badges45 bronze badges

Collectives™ on Stack Overflow

javascript img element insert (replace, not append)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related