[jQuery] 依據點擊位置新增(append)元素的方法

來講一下怎麼使用 jQuery 製作點擊後在頁面上新增元素的方法，首先準備要新增的元素的 CSS：

.dot{
  width: 16px;
  height: 16px;
  background:red;
  border-radius: 50%;
  position: absolute;
}

設定 position 為 absolute 的目的是晚點新增的時候可以直接設定位置。

接下來抓取點擊時的位置：

$("html").click(function(e){
  let left=e.pageX;
  let top=e.pageY;
})

利用事件物件去抓到點擊當時的頁面座標，然後 append 元素上去。

$("body").append("<div class='dot'></div>")

只是這時 append 的元素因為沒有定位，都會擠在左上角，接下來就是要替新增的元素定位了。

$(".dot").last().css({
    "left": left,
    "top": top
  })

透過抓到最後一個 .dot 的元素，再把點擊的位置設定給他，這樣就完成了。

完成程式碼：