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。

Answer 2

您可以这样使用：

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

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

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

将图像对象插入HTML

2 个答案: