使用createElement（）和appendChild（）的Javascript帮助
[英]Javascript help using createElement() and appendChild()
问题描述
I'm having trouble writing some JavaScript for a project. 
我在为项目编写一些JavaScript时遇到了麻烦。 I have the HTML code: 我有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>
I want to write the JavaScript to have the text in the div to follow the mouse cursor and also for it to spawn an 'o' when and where the mouse is clicked. 我想编写JavaScript以使div中的文本跟随鼠标光标，并且还可以在单击鼠标时生成“o”。 I'm wanting to use the DOM methods createElement and appendChild to do so but can't envisage in my head how to do it, at this stage I have no JavaScript written. 我想要使用DOM方法createElement和appendChild这样做，但是无法想象如何做到这一点，在这个阶段我没有编写JavaScript。 Does anyone have any links to tutorials on this or have any tips to help. 有没有人有关于此的教程的任何链接或有任何提示可以提供帮助。
3 个解决方案
解决方案1
1 已采纳 2015-06-10 05:42:21
This is actually fairly straight-forward. 这实际上是相当直接的。 We need only to listen for clicks on the root element, inspect the click event object for click coordinates, and set up some basic styling of an ad-hoc element: 我们只需要监听根元素的点击，检查click事件对象的点击坐标，并设置ad-hoc元素的一些基本样式：
// Listen for click events on the <body> element document.documentElement.addEventListener( "click", function ( event ) { // Create an element to hold out "o", and some styles var element = document.createElement( "span" ), elStyle = { position: "absolute", top: event.clientY + "px", left: event.clientX + "px", }; // Apply our styles to the element Object.keys( elStyle ).forEach( function ( property ) { element.style[ property ] = elStyle[ property ]; }); // Set the innerHTML of the element, and insert it into the <body> element.innerHTML = "o"; document.body.appendChild( element ); });
html { cursor: pointer }
解决方案2
1 2015-06-10 05:44:21
If you want drop an "o" into the cursor position , look my fiddle. 如果你想在光标位置放一个“o”，看看我的小提琴。 I don't know if it's you want to do but ... 我不知道你是不是想做但是......
https://jsfiddle.net/f2op1prs/ https://jsfiddle.net/f2op1prs/
$(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);
});
解决方案3
1 2015-06-10 05:52:53
Here you go, I guess this is what you wanted to achieve , right ? 你走了，我猜这是你想要实现的，对吧？ Change according to your need. 根据您的需要改变。
$("#wrap").mousemove(function(e) { $('#tail').css({ 'top': e.clientY - 20, 'left': e.clientX - 20 }); }); $(document).click(function(e) { var x = e.pageX + 'px'; var y = e.pageY + 'px'; var img = $('<b>o</b>'); var div = $('<div>').css({ "position": "absolute", "left": x, "top": y }); div.append(img); $(document.body).append(div); });
#wrap { width: 500px; height: 500px; } #myimg { position: absolute; z-index: 1000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="wrap"> <div id="tail" style="position:absolute; display:block"> Click to spawn an egg. </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.