將圖像對象插入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。

Answer 2

你可以這樣使用：

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

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

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