如何使用 Javascript 以便每次单击图像时，它都会在单击的项目下方添加一个新图像？

Question

因此，如果标题对您来说没有意义，我将在此处进行更详细的介绍。首先，我将向您展示我要将其添加到的文档。

<html>
 <body>
  <div style="text-align:center"><!-- This is where the image that will be clicked on will be placed.--> </div>
  <div style="text-align:center"><!-- This is where I want the new images to show up. --></div>
 </body>
</html>

我希望这能让您对我希望它做什么有一个基本的了解，但如果没有，我现在会进一步解释...... 因此，每次单击 'image1' 时，都会在其下方放置一个新图像，这是确定的，并且始终是 'image2'。我将如何成功。谢谢

Answer 1

入门指南：

当您在 main 内部单击时，一个新图像将附加到 new。

$('#main').click(function() {
  $('#new').append("<img src='http://placehold.it/140x100' />");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="text-align:center" id='main'>
  <img src='http://placehold.it/350x150' />
</div>
<div style="text-align:center" id='new'></div>

如何使用 Javascript 以便每次单击图像时，它都会在单击的项目下方添加一个新图像？

How to use Javascript so that every time I click a image, its adds a new image below the item clicked on?

html

javascript

css

jquery