onclick add image to div

Question

I am trying to get image in a <div> using onclick.

Now I am getting the text on click. but I want to get the image in div on click...

How can i do this...?

Here is code I have implemented,,

Code:

<script>
function myFunction()
{
document.getElementById("surprise").innerHTML=images/aftersurprise.png;
}
</script>

When I click on element I should get the aftersurprise.png image on surprise element...

Answer 1

use

document.getElementById("surprise").innerHTML="<img src='images/aftersurprise.png' />";

Answer 2

You are giving the image url to the innerHTML of div element. To add an image there you have to do something like this

document.getElementById("surprise").innerHTML="<img src='images/aftersurprise.png' />";

Or why are you not going with jquery, it's very easy with that like

$('#surprise').append("<img src='images/aftersurprise.png' />");