使用createElement（）和appendChild（）的Javascript帮助_Javascript_Html_Dom

使用createElement（）和appendChild（）的Javascript帮助

javascript html dom

使用createElement（）和appendChild（）的Javascript帮助,javascript,html,dom,Javascript,Html,Dom,我在为项目编写JavaScript时遇到问题。我有HTML代码： <html> <head> <title>Mouse Tail and Spawn</title> <script src="tail.js"></script> </head> <body> <div id="tail" style="position:absolute; display:none"> Click to

我在为项目编写JavaScript时遇到问题。我有HTML代码：

<html>
<head>
<title>Mouse Tail and Spawn</title>
<script src="tail.js"></script>
</head>
<body>
<div id="tail" style="position:absolute; display:none">
Click to spawn an egg.
</div>
</body>
</html>


鼠尾产卵
点击产卵。

我想编写JavaScript，使div中的文本跟随鼠标光标，并在鼠标单击的时间和位置生成一个“o”。

我想使用DOM方法

createElement

和

appendChild

来实现这一点，但我脑子里想不出怎么做，在这个阶段我还没有编写JavaScript。有没有人有关于这方面的教程的链接或有任何帮助的提示。

这实际上是相当直接的。我们只需要监听根元素上的点击，检查点击事件对象的点击坐标，并设置一些特殊元素的基本样式：

//侦听元素上的单击事件
document.documentElement.addEventListener（“单击”），函数（事件）{
//创建一个元素来突出“o”和一些样式
var element=document.createElement（“span”），
埃尔斯泰尔={
位置：“绝对”，
顶部：event.clientY+“px”，
左：event.clientX+“px”，
};
//将我们的样式应用于元素
Object.keys（elStyle）.forEach（函数（属性）{
element.style[property]=elStyle[property]；
});
//设置元素的innerHTML，并将其插入
element.innerHTML=“o”；
document.body.appendChild（元素）；
});
html{cursor:pointer}
如果你想在光标位置放一个“o”，看看我的小提琴。我不知道这是不是你想做的但是

$（窗口）.mousemove（函数（e）{
$node=$（“#以下”）；
$node.css（'left'，e.pageX）；
$node.css（'top'，e.pageY）；
});
$（窗口）。单击（函数（e）{
$node=$（''）；
$node.addClass（'tail'）；
$node.html（'o'）；
$node.css（'left'，e.pageX）；
$node.css（'top'，e.pageY）；
$（'body'）。追加（$node）；
}); 
给你，我想这就是你想要实现的，对吧？
根据你的需要改变

$（“#wrap”）.mousemove（函数（e）{
$（'#tail'）.css({
“顶级”：e.clientY-20，
“左”：e.clientX-20
});
});
$（文档）。单击（函数（e）{
var x=e.pageX+‘px’；
变量y=e.pageY+‘px’；
var img=$（'o'）；
var div=$（''）.css({
“位置”：“绝对”，
“左”：x，
“顶部”：y
});
附加分部（img）；
$（document.body）.append（div）；
});
#换行{
宽度：500px；
高度：500px；
}
#myimg{
位置：绝对位置；
z指数：1000；
}

点击产卵。
谢谢大家的帮助，我会消化所有这些，然后集中精力。
        $(window).mousemove(function(e) {
            $node = $('#following');
            $node.css('left', e.pageX);
            $node.css('top', e.pageY);
        });
        $(window).click(function(e) {
            $node = $('<div></div>');
            $node.addClass('tail');
            $node.html('o');
            $node.css('left', e.pageX);
            $node.css('top', e.pageY);
            $('body').append($node);

        });