在Javascript中显示数组中的图像

Question

我有一系列数组，作为输出我想显示图像。 我知道如何使用document.write这样做，但我无法理解我将如何使用dom做这样的事情。

document.write("<p><img src='"+stones.value+"' alt='Mick'></p>");

如何在不使用document.write的情况下实现这样的目标？

Answer 1

 var img = new Image();
 img.src = stones.value;
 img.alt = 'Mick';

 document.getElementById('targetElement').appendChild(img);

我在这里使用Image构造函数。

Oriol展示了如何使用纯DOM来实现它。

很好读： `new Image（）`和`document.createElement（'img'）`之间有区别吗？

Answer 2

使用DOM方法：

var p = document.createElement('p'),
    img = document.createElement('img');
img.src = stones.value;
img.alt = 'Mick';
p.appendChild(img);
wrapper.appendChild(p);

使用innerHTML ：

wrapper.innerHTML += "<p><img src='"+stones.value+"' alt='Mick'></p>";

其中wrapper是对要插入该代码的元素的引用。 一些例子：

var wrapper = document.getElementById(/* CSS id */);
var wrapper = document.getElementsByClassName(/* CSS class */)[0];
var wrapper = document.querySelector(/* CSS selector */);