CODEWITHSUNDEEP
javascripthtml
androidGenX
androidGenX

Reputation: 1148

Innerhtml dynamic image loading not working

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?

Upvotes: 0

Views: 1964

Answers (3)

RobG
RobG

Reputation: 147413

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.

Upvotes: 0

RozzA
RozzA

Reputation: 609

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

Upvotes: 5

Farshad
Farshad

Reputation: 1485

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 + "' />";

Upvotes: 0

Related Questions