Javascript 单击时在光标位置旁边创建一个DIV

我想做的是，当用户单击页面上的某个地方时，包含随机图像的div会显示在单击的位置，并停留在那里。这必须能够重复，每次显示不同的图像。有什么建议吗？

JS:

---

从1到10的随机图像：

jQuery(document).ready(function(){
  $(document).click(function(e){
    var num = Math.floor((Math.random()*10)+1);
    var img = $('<div>Image '+num+':<img src="image' + num + '.png" /></div>');
    $("#img_container").html(img).offset({ top: e.pageY, left: e.pageX});
  });
})

jQuery（文档）.ready（函数（）{
$（文档）。单击（函数（e）{
var num=Math.floor（（Math.random（）*10）+1）；
var img=$（'Image'+num+'：'）；
$（“#img_container”）.html（img）.offset（{top:e.pageY，left:e.pageX}）；
});
})

---

也谢谢你！祝你圣诞快乐！是否有一个纯javascript与此等效？ThnX希望您能在这方面帮助我，在代码中添加一个textarea很容易，但是在使用click创建新元素时，我们如何设置新元素的焦点？出于某种原因，焦点总是放在元素的主体上。为什么“var div=Jquery stuff”中的var div是必需的？如果不把它赋给一个变量，它会工作吗？@ArtemYevtushenko在那个代码示例中，我让它在1秒后淡出。如果您不希望这样，那么就不需要变量。

body {
    position: relative;
}

.image-wrapper {
    position: absolute;
    transform: translate(-50%, -50%);
    opacity: 1;
}

.image-wrapper.fade-out {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

jQuery(document).ready(function(){
  $(document).click(function(e){
    var num = Math.floor((Math.random()*10)+1);
    var img = $('<div>Image '+num+':<img src="image' + num + '.png" /></div>');
    $("#img_container").html(img).offset({ top: e.pageY, left: e.pageX});
  });
})