0

I have an image

`<img src="../images/Editing-Edit-icon.png" data-toggle="modal" data-target=".editButton"  id="deleteBtn"/>`

and a button

`<button onclick="loadImage()">`

I am trying to load img inside a div on button click, like the follows:

function loadImage(){
 cell1.innerHTML = document.getElementById("deleteBtn").value;
}

But it is not working. How can I do that?

3 Answers 3

5
function loadImage(){
    cell1.innerHTML = '<img src="'+document.getElementById("deleteBtn").src+'" />';
}
0
0

If you want src of the image , you must get src property from img tag

 cell1.innerHTML = document.getElementById("deleteBtn").src;

Then if you have load image with deleteBtn src property you must set :

cell1.innerHTML = "<img src='" + document.getElementById("deleteBtn").src + "' />";
0
0

You can avoid innerHTML by using cloneNode to clone the image element:

var clone = document.getElementById('deleteBtn').cloneNode();
clone.id = /* whatever */
// Change other properties as required
cell.appendChild(clone);

Incidentally, closing empty HTML elements with /> is just putting junk in the markup.

1
  • multiple calls to this code would result in many copies of the image, rather than simply replacing the current one.
    – RozzA
    Sep 1, 2014 at 9:56

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.