我只是想知道是否有更好的解决方案：
var img = new Image();
var div = document.getElementById('foo');
img.onload = function() {
div.innerHTML += '<img src="'+img.src+'" />';
};
img.src = 'path/to/image.jpg';
想要的方法：
console.log(img); // <img src="path/to/image.jpg" />
div.innerHTML += img;
想法？
【问题讨论】：
标签： javascript html image
我想你想要的是这样的：
var img = new Image();
var div = document.getElementById('foo');
img.onload = function() {
div.appendChild(img);
};
img.src = 'path/to/image.jpg';
您已经有一个加载的图像对象。您应该直接将其附加到 DOM 中，而不是使用 innerHTML 创建一个全新的图像对象。
此外，将+= 与innerHTML 一起使用是非常浪费的，因为它会获取您已经拥有的所有对象，将它们转换为 HTML 文本，添加到该文本上，然后生成所有新的 DOM 对象 - 丢失所有事件处理程序当它也制造新物体时。将一个新的 DOM 对象添加到现有 DOM 对象的集合上会更有效。
另外，document.getElementById() 接受前面没有# 的id。
【讨论】：
onload 何时被解雇？设置后.src?
# 上的错误，我急于提问。
.innerHTML = 来解决它，但我只是没有意识到每次添加时都会重新评估所有旧 HTML。
你可以这样使用：
var img = new Image();
var div = document.getElementById('theDiv');
img.onload = function() {
div.appendChild(img);
};
img.src = 'path/to/image.jpg';
【讨论】：
.src 之后设置onload 处理程序是IE 中的一个问题。如果图像在浏览器缓存中，load 事件将在您使用 onload 处理程序之前触发，您将错过该事件并且代码将无法工作。
.onload() 函数之后带来img.src。实际上，这与您的答案相同！
document.getElementById()中删除#之外，它现在使它成为我的答案的精确副本。