Javascript 如何在游标DOM上创建新元素

如何创建新元素并将其放置在鼠标/光标所在的位置？ 下面是一些示例代码：

<div id = "adivthing></div>

<script>
var newthing = document.createElement("input");                
document.getElementById("adivthing").appendChild(newthing); 
</script>

---

如果在
newthing
元素上使用
position:fixed
或
position:absolute
样式属性，则可以使用
left
和
top
属性在框中移动元素

如果从触发事件（例如单击）中获得鼠标坐标，则可以将相应的
左
和
顶
添加到元素中

示例如下：


函数createInput（事件）{
var newthing=document.createElement（“输入”）；
document.getElementById（“adivthing”）.appendChild（newthing）；//现有代码
//获取鼠标的坐标
var x=event.clientX；//获取水平坐标
var y=event.clientY；//获取垂直坐标
//使用坐标定位新件
newthing.style.position=“fixed”//修复相对于页面的el。可以使用绝对值。
newthing.style.left=x+“px”；
newthing.style.top=y+“px”；
}
/*可选-使新事物在笔中更加明显*/
输入{
高度：10px；
宽度：50px；
背景：红色；
}
#告别{
高度：600px；
宽度：600px；
背景：蓝色；
}

指定新元素
位置：绝对
样式，然后将
左
和
顶部
样式设置为光标位置。好的，我马上开始！我可能会回来问更多的问题。也可能会将其附加到正文中，否则如果元素父元素被定位，它可能不起作用。这与Barmar提供的答案基本相同。此外，正如ritaj所说，您需要将newthing的祖先设置为position:relative，以便在newthing上使用position:absolute。