web-dev-qa-db-ja.com

画像オブジェクトを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;

考え？

javascripthtmlimage
18
daryl

あなたが望むのはこれだと思います：

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

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

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

ロード済みの画像オブジェクトが既にあります。 innerHTMLを使用してまったく新しいイメージオブジェクトを作成するのではなく、DOMに直接追加するだけです。

さらに、innerHTMLで_+=_を使用すると、そこにあるすべてのオブジェクトを取得し、それらをHTMLテキストに変換し、そのテキストに追加し、すべての新しいDOMオブジェクトを作成するため、非常に無駄です-すべてを失う新しいオブジェクトを作成するときのイベントハンドラー。新しいDOMオブジェクトを既存のDOMオブジェクトのセットに追加するだけの方が効率的です。

さらに、document.getElementById()は、その前に_#_なしでidを取ります。

40
jfriend00

この方法を使用できます：

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

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

img.src = 'path/to/image.jpg';
2
Praveen Kumar Purushothaman