如何在jquery中添加图像并在每次onclick函数后递增图像

<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>

<div id="imageContainer"></div>

$(document).ready(function() {
  var counter = 1; // 初始化计数器变量

  // 监听点击事件
  $('#imageContainer').click(function() {
    var imagePath = 'path/to/image' + counter + '.jpg'; // 图像路径，根据计数器变量动态生成
    var imageElement = $('<img>').attr('src', imagePath); // 创建图像元素并设置src属性

    // 将图像元素添加到图像容器中
    $('#imageContainer').append(imageElement);

    counter++; // 计数器递增
  });
});