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.

此外，使用+=withinnerHTML非常浪费，因为它会获取您已经拥有的所有对象，将它们转换为 HTML 文本，添加到该文本上，然后生成所有新的 DOM 对象 - 当它也生成新对象时丢失所有事件处理程序。将一个新的 DOM 对象添加到现有 DOM 对象的集合上会更有效。

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

Answer 2

你可以这样使用：

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

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

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