JavaScript新增DOM Element

今天想利用Chrome Extension在Gmail輸入mail的欄位旁邊加上一個Button，可以讓使用者做些好玩的事。

可以利用下面程式碼達成這目標：

document.addEventListener('click', function(e){
  var xx = e.pageX, // 取得滑鼠X位置
      yy = e.pageY; // 取得滑鼠Y位置
  var node = document.createElement("div");
      node.style.position = "absolute";
      node.style.top = yy + "px";
      node.style.left = xx + "px";
      node.style.width = "50px";
      node.style.height = "50px";
      node.style.backgroundColor = "red";
  document.body.appendChild(node);
})

但是…

在實作方面還有z-index的問題需要解決，有時候會讓插入的button顯示在下一層？

還有如何讓button消失？什麼時候消失？這部份的問題也要考慮。

如果要刪除剛剛新增的DOM Element的話，可以利用下方程式：

var nodes =  document.getElementsByTagName('div'); //傳回DIV element的array   
//remove last div
if(nodes && nodes.length > 0){
    document.body.removeChild(nodes[nodes.length-1]); //刪除最後面的DIV
}