javascript - 在脚本中添加图像

Question

我想知道是否有任何方法可以从脚本中添加图像。例如，我想这样做的原因是我可以在每次用户点击时添加一个图像。我可以在正文中添加大量图像，然后将它们全部隐藏并在有人单击时一一显示，但似乎还有更好的方法。（如果你不明白，我对 JavaScript很陌生）:)。

Answer 1

要动态添加照片，请使用如下代码：

<div id="holder"></div>

<script type="text/javascript">
var img = new Image();
img.src = 'path/to/image.jpg';
var holder = document.getElementById('holder');
holder.appendChild(img);
</script>

Image对象对应于元素<img>。要了解有关Image(aka HTMLImageElement) 对象的更多信息，请参见此处。要了解有关该appendChild方法的更多信息，请参见此处。

Answer 2

您可以按照以下步骤操作：

1. 在 html 中选择要添加图像的元素。例子：<div id='maker'></div>
2. 在您的 html 中为您的按钮添加一个事件。例子：<button onclick='addImg()'>Add</button>

3. 然后将这些代码写入您的脚本标签或 .js 文件。这是代码：

   function addImg()
   {
      var maker = document.getElementById('maker');
       var image = document.createElement('img');
       image.src = '/image/path/with/extension.jpg';
       maker.appendChild(image);
   }