Reputation: 643
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...
Upvotes: 2
Views: 42531
Reputation: 1
$('#divname').append or prepend("<img src='pathOfImages.jpg'/>");
here use only one attributes like append , another prepend >(before content)
Upvotes: 0
Reputation: 1
As I understand, your issue is that all the content is displayed on a new/ existing page except image...! If that is so, you just need to put some delay when calling your JS function. Try this:
function Myfunction ()
{
setTimeout(load, 1000); //this delay will allow browser to load complete image
function load()
{
var divToPrint = document.getElementById('surprise');
var popupWin = window.open('', '_blank','width=1000, height=800, location=no, left=200px');
//popupWin.document.open(); //needed when popup required
popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
popupWin.document.close();
}
}
Upvotes: 0
Reputation: 2572
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' />");
Upvotes: 2
Reputation: 137
img = document.createElement("img");
img.setAttribute('src','https://www.google.co.in/images/srpr/logo11w.png');
document.getElementById("surprise").appendChild(img);
here u can set ur image src
Upvotes: 0
Reputation:
Try this
(function() {
var oDiv = document.getElementById('surprise');
oDiv.addEventListener('click', function() {
this.setAttribute('style', 'background-image: images/aftersurprise.png');
}, false);
})();
It sets the image as background image of the div
Upvotes: 0
Reputation: 56549
Just giving the image url will not add the image inside the div. You have to specify it using img
tag.
or dynamically create it using the following code and append to the div
var img = document.createElement('img')
img.src = 'images/aftersurprise.png';
document.getElementById('surprise').appendChild(img);
Upvotes: 0
Reputation: 1853
use
document.getElementById("surprise").innerHTML="<img src='images/aftersurprise.png' />";
Upvotes: 10