CODEWITHSUNDEEP
javascriptimagereplace
Wasteland
Wasteland

Reputation: 5379

javascript img element insert (replace, not append)

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

Upvotes: 2

Views: 1424

Answers (3)

David Thomas
David Thomas

Reputation: 253308

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:

Upvotes: 4

putvande
putvande

Reputation: 15213

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

Upvotes: 3

Domain
Domain

Reputation: 11808

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

Upvotes: 0

Related Questions