javascript - 将图像对象插入 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 创建一个全新的图像对象。

此外，将 += 与 innerHTML 一起使用是非常浪费的，因为它需要你已经拥有的所有对象，将它们转换为 HTML 文本，添加到该文本上，然后然后创建所有新的 DOM 对象 - 当它也创建新对象时丢失所有事件处理程序。将新的 DOM 对象添加到现有 DOM 对象的集合中会更加高效。

此外，document.getElementById() 获取的 id 前面没有 #。