Javascript 无法在网页上显示的HTML段落上覆盖图像图标

我试图在HTML页面上插入一个图像，点击鼠标按钮。此图像表示打开便笺的标签。我能够想出如何在鼠标位置插入图像。但是，我不确定是否可以在HTML页面的任何位置插入图像。我们能在段落上覆盖这个图像吗？请帮忙

.overlay\u img{
.overlay_img {
   position: absolute;
   z-index: 9999;
}

$('body').on('click', function(e) {
  $(this).append($('<img/>', {
                      className: 'overlay_img'
                      style: 'left: '+ e.pageX +'px; top: '+ e.pageY +'px',
                      src: 'SOMETHING',
                      alt: 'SOMETHING'
                   })
                );
});

位置：绝对位置；
z指数：9999；
}
$（'body'）。在（'click'，函数（e）上{
$（此）.append（$（'
您还可以使用：

$('body').on('click', function(e) {
   $(this).append('<img src="" class="something" alt="some" style="left: '+ e.pageX +'px; top: '+ e.pageY +'px"/>');
});

$（'body'）。在（'click'，函数（e）{
$（此）。附加（“”）；
});

例如，我将图像附加到
body
，您可以将其附加到任何目标。
@CodeParadox这两个版本有任何性能问题吗？我曾经读过一篇文章，
$（''）
比
$（'）快。attr（'attr'，'value'））
。你知道吗？@thecodeparadox我指的是浏览器中代码的性能。上面说浏览器拥有
innerHTML
功能，可以使用。第一种选择是否与之相同？@thecodeparadox不知道。我在JSFIDLE上编程了一个测试。我的Chrome bro的第一个版本大约慢4倍wser（结果打印在控制台上）