Вставить объект изображения в HTML

Мне просто интересно узнать, есть ли лучшее решение для этого:

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;

Мысли?

Ответ 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 без # перед ним.

Ответ 2

Вы можете использовать этот способ:

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

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

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