Html onclick 将图像添加到 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19331606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onclick add image to div
提问by MintY
I am trying to get image in a <div>using onclick.
我试图在<div>using 中获取图像onclick。
Now I am getting the text on click. but I want to get the image in div on click...
现在我正在点击文本。但我想在点击时在 div 中获取图像...
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.pngimage on surprise element...
当我点击元素时，我应该得到aftersurprise.png惊喜元素上的图像......
回答by Pankaj Sharma
use
用
document.getElementById("surprise").innerHTML="<img src='images/aftersurprise.png' />";
回答by nrsharma
You are giving the image url to the innerHTMLof div element. To add an image there you have to do something like this
您将图像 url 提供给innerHTMLdiv 元素。要在那里添加图像，您必须执行以下操作
document.getElementById("surprise").innerHTML="<img src='images/aftersurprise.png' />";
Or why are you not going with jquery, it's very easy with that like
或者你为什么不去jquery，像这样很容易
$('#surprise').append("<img src='images/aftersurprise.png' />");
回答by Arasan
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
在这里你可以设置你的图像 src
回答by Ahsan Khalid Butt
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:
据我了解，您的问题是所有内容都显示在新/现有页面上，除了图像......！如果是这样，您只需要在调用 JS 函数时进行一些延迟。尝试这个：
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();
}
}
回答by chillu
$('#divname').append or prepend("<img src='pathOfImages.jpg'/>");
here use only one attributes like append , another prepend >(before content)
这里只使用一个属性，如 append ，另一个 prepend >(before content)
回答by Praveen
Just giving the image url will not add the image inside the div. You have to specify it using imgtag.
仅提供图像 url 不会在 div 内添加图像。您必须使用img标签指定它。
or dynamically create it using the following code and append to the div
或使用以下代码动态创建它并附加到 div
var img = document.createElement('img')
img.src = 'images/aftersurprise.png';
document.getElementById('surprise').appendChild(img);
回答by Praveen
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
它将图像设置为 div 的背景图像
