将图像对象插入HTML

Question

我只是想知道是否有更好的解决方案:

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;

思考？

Answer 1

我想你想要的是这个:

var img = new Image();
var div = document.getElementById('foo');

img.onload = function() {
  div.appendChild(img);
};

img.src = 'path/to/image.jpg';

您已经有一个已加载的图像对象.您应该直接将其附加到DOM中,而不是使用创建一个全新的图像对象innerHTML.

另外使用+=with innerHTML是非常浪费的,因为它需要你已经拥有的所有对象,将它们转换为HTML文本,添加到该文本然后创建所有新的DOM对象 - 当它也创建新对象时丢失所有事件处理程序.这样,只需将新DOM对象添加到现有DOM对象集合上的方式就更有效了.

另外,在它前面document.getElementById()没有一个id #.