在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 */);