Javascript help with createElement () and appendChild ()
I am having trouble writing JavaScript for a project. I have HTML code:
<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 JavaScript to make the text in a div match the mouse cursor and also to make it spawn an "o" when and where the mouse is clicked. I want to use DOM createElement
and methods appendChild
to do this, but I can't figure out in my head how to do it, at this point I have no JavaScript written. Does anyone have links to tutorials on this, or have any tips to help.
source to share
It's actually pretty straight forward. We only need to listen for clicks on the root element, check the click event object for the coordinates of the clicks, and set up some basic ad-hoc element style:
// 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 }
source to share
If you want to omit the "o" at the cursor position, check out my violin. I don't know if you want to do this, but ...
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);
});
source to share
Here you go, I think this is what you wanted to achieve, right? Modify according to your needs.
$("#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>
source to share