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来实现它。

好看了：Is there a difference between `new Image()` and `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 */);

在Javascript中显示数组中的图像

2 个答案: