Question

I have a div in which I am dynamically adding an image.

div.append('<img class="prod48" src="' + url + '" />');

Now the url is set by focusout of a textbox depending on the text in it. Since the append function will go on appending, how should I just change this url and not append another image in the div? The first time the focusout is called only then should I be able to append and rest times updating the url.

Answer 1

If you want to update the image element after it has been added to the document, you’ll have to have some way of referencing it.

A couple of ideas come to mind immediately:

1. Give the image a unique ID, and then use that:

   # First, change the html to include an id
   div.append('<img id="abcdef1234" class="prod48" src="' + url + '" />');
   
   #...
   # Later, grab the image by its id and change the source url
   var img = document.getElementById('abcdef1234');
   img.src = newUrl;
   

2. Alternately, construct the image dynamically the first time, and keep the element in a variable:

   # First, create an element, and hold it in a variable:
   var img = document.createElement('img');
   img.className = "prod48";
   img.src = url;
   # Now append it to the div:
   div.append(img);
   
   #...
   # Later, we still have that element, so we can just change the source URL:
   img.src = newUrl;