Javascript help using createElement() and appendChild()

Question

Javascript help using createElement() and appendChild()

1.2k Views Asked by Crakrjack At 17 April 2025 at 20:22

I'm having trouble writing some JavaScript for a project. I have the 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 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. 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. Does anyone have any links to tutorials on this or have any tips to help.

Original Q&A

There are 3 best solutions below

Dimag Kharab On 10 June 2015 at 05:52

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>

Demo

Thibault Bach On 10 June 2015 at 05:44

If you want drop an "o" into the cursor position , look my fiddle. I don't know if it's you want to do 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);

        });

**Sampson** · Accepted Answer

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:

// 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 }

Javascript help using createElement() and appendChild()

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in DOM

Trending Questions

Popular # Hahtags

Popular Questions