使用 javascript 将图像添加到 HTML 文档
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2735881/
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
Adding images to an HTML document with javascript
提问by Anonymous
I've tried some HTML DOM code from several sites, but it isn't working. It isn't adding anything. Does anyone have a working example on this?
我已经尝试了来自多个站点的一些 HTML DOM 代码，但它不起作用。它没有添加任何东西。有没有人有这方面的工作示例？
this.img = document.createElement("img");
this.img.src = "img/eqp/"+this.apparel+"/"+this.facing+"_idle.png";
src = getElementById("gamediv");
src.appendChild(this.img)
But it isn't adding anything to the div. (gamediv) I've tried document.body as well, with no result.
但它没有向 div 添加任何内容。(gamediv) 我也试过 document.body ，但没有结果。
Thanks in advance.
提前致谢。
回答by Daniel Vassallo
You need to use document.getElementById()in line 3.
您需要document.getElementById()在第 3 行中使用。
If you try this right now in the console:
如果您现在在控制台中尝试此操作：
var img = document.createElement("img");
img.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
var src = document.getElementById("header");
src.appendChild(img);<div id="header"></div>... you'd get this:
......你会得到这个：
回答by Guffa
This works:
这有效：
var img = document.createElement('img');
img.src = 'img/eqp/' + this.apparel + '/' + this.facing + '_idle.png';
document.getElementById('gamediv').appendChild(img)
Or using jQuery:
或者使用 jQuery：
$('<img/>')
.attr('src','img/eqp/' + this.apparel + '/' + this.facing + '_idle.png')
.appendTo('#gamediv');
回答by user2886138
With a little research i found that javascript does not know that a Document Object Exist unless the Object has Already loaded before the script code (As javascript reads down a page).
通过一些研究，我发现 javascript 不知道文档对象存在，除非该对象已在脚本代码之前加载（当 javascript 读取页面时）。
<head>
<script type="text/javascript">
function insert(){
var src = document.getElementById("gamediv");
var img = document.createElement("img");
img.src = "img/eqp/"+this.apparel+"/"+this.facing+"_idle.png";
src.appendChild(img);
}
</script>
</head>
<body>
<div id="gamediv">
<script type="text/javascript">
insert();
</script>
</div>
</body>
回答by FullForceDonkeyPunch
or you can just
或者你可以
<script>
document.write('<img src="/*picture_location_(you can just copy the picture and paste it into the the script)*\"')
document.getElementById('pic')
</script>
<div id="pic">
</div>
回答by Peter Bridger
Get rid of the thisstatements too
也摆脱这个陈述
var img = document.createElement("img");
img.src = "img/eqp/"+this.apparel+"/"+this.facing+"_idle.png";
src = document.getElementById("gamediv");
src.appendChild(this.img)
回答by Kristoffer Sall-Storgaard
Things to ponder:
需要思考的事情：
- Usejquery
- Which
thisis your code refering to - Isnt
getElementByIdusuallydocument.getElementById? - If the image is not found, are you sure your browser would tell you?
- 使用jQuery
this你的代码指的是哪个getElementById通常不是document.getElementById吗？- 如果找不到图像，您确定您的浏览器会告诉您吗？
