在脚本中添加图像

Question

我想知道是否有任何方法可以在脚本中添加图像。 例如，我想这样做的原因是每次用户点击时我都可以添加一个图像。 我可以在Body中添加大量图像并隐藏它们并在有人点击时逐个显示它们，但似乎有一种更好的方式。 （如果你没有得到它，我非常新的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（又名HTMLImageElement）对象，see here。要详细了解appendChild方法，see here。

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 = '/your/image/path/with/extension.jpg';
   maker.appendChild(image);
   

   }