如何在光标 DOM 上创建新元素

Question

我如何才能创建一个新元素并将其放置在鼠标/光标所在的位置？我下面有一些示例代码：<div id = "adivthing></div><script>var newthing = document.createElement("input");                document.getElementById("adivthing").appendChild(newthing); </script>

Answer 1

如果您在元素上使用position: fixed或position: absolutestyle 属性newthing，则可以使用left和top属性在框周围移动元素。

如果您从触发事件（例如单击）获取鼠标坐标，则可以将适当的left和添加top到您的元素中。

下面的例子：

function createInput(event){

  var newthing = document.createElement("input");                

  document.getElementById("adivthing").appendChild(newthing); // Your existing code

  // get the coordinates of the mouse

  var x = event.clientX;     // get the horizontal coordinate

  var y = event.clientY;   // get the vertical coordinate

  // position newthing using the coordinates

  newthing.style.position = "fixed"; // fixes el relative to page. Could use absolute.

  newthing.style.left = x + "px";

  newthing.style.top = y + "px";

}

/* Optional - Making new things more obvious in the pen */

input{

    height: 10px;

    width: 50px;

    background: red;

}

#adivthing{

    height: 600px;

    width: 600px;

    background: blue;

}

<!-- Onclick event added to your existing markup -->

<div id="adivthing" onclick="createInput(event)"></div>