how do i create a new div element at the cursors position without jquery

Question

How would I make a JavaScript function that, when it is run, creates a new <div> element at the cursors position with the class 11 and id 12; then deletes it after 2 seconds?

I don't want to use any external scripts. I just want it to be raw JavaScript.

You can probably use `onmouseenter` event on your elements. You will be able to create a div next to it because you can have curent element. `onmouseenter="myEnterFunction(this)"` — Gilsdav, Feb 13 '17 at 22:09
Ok sorry. To put the div where you want, you can make a function that set the x and y axis of the "temp" div (using left and top styles). To get coordonates of cursor, register to event mouseMove `document.captureEvents(Event.MOUSEMOVE); document.onmousemove = myFunction;`. After that you only need to deal with the "display" style and `setTimeout()`. — Gilsdav, Feb 13 '17 at 22:27

KeyKi · Answer 1 · 2023-03-31T22:10:13.457

Here is the example how to create a div at the cursor position with the custom size. The div is resizeable until pointerup. divs disappear after nine thousand ms.

Note: the resize (the mouse moving with the pressed left button like usual drag-select) is mandatory to set the size for the div, since the initial size is 0x0.

addEventListener("pointerdown", createDiv);

async function createDiv(event){
  event.preventDefault();
  const x = event.pageX;
  const y = event.pageY;

  const div = document.createElement("div");
  div.style.position = "absolute";
  div.style.width = "0";
  div.style.height = "0";
  div.style.left = x + "px";
  div.style.top = y + "px";
  div.classList.add("blue-rectangle");
  document.body.append(div);

  function resize(event) {
    const diffX = event.pageX - x;
    const diffY = event.pageY - y;
    div.style.left = diffX < 0 ? x + diffX + "px" : x + "px";
    div.style.top  = diffY < 0 ? y + diffY + "px" : y + "px";
    div.style.height = Math.abs(diffY) + "px";
    div.style.width = Math.abs(diffX) + "px";
  }
  addEventListener("pointermove", resize);
  addEventListener("pointerup", () => {
    removeEventListener("pointermove", resize);
  });

  await sleep(9000);
  div.remove();
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

.blue-rectangle {
  background-color: rgba(20, 137, 189, 0.5);
}

If you don't need the initial resizing, just remove the resize related code and hardcode the width and height, for example:

      div.style.width = "128px";
      div.style.height = "128px";

_This_ works fine in both Chromium and Firefox on desktop. The accepted answer does not work. — KeyKi, Mar 31 '23 at 21:56

Abana Clara · Accepted Answer · 2017-02-14T03:33:24.517

Firstly, you're going to have to use mouse events. Mouse events contains properties such as clientX, clientY, pageX, pageY, offsetX, offsetY, screenX, screenY. Look up the difference. These are read-only properties and display coordinates based on what kind of property they are.

So basically you can pretty much create an element, make the position absolute, and set the top and left properties using the mouse events properties such as pageX and pageY.

Adding a function

document.body.setAttribute('onclick', 'myFunction(event)');

Then creating the element

function myFunction(ev){
  var div = document.createElement('div');
  div.id = '12';
  div.className = '11';

  div.style.position = 'absolute';
  div.style.height = '100px';
  div.style.width = '100px';
  div.style.backgroundColor = 'cornflowerblue';
  div.style.top = ev.pageY;
  div.style.left = ev.pageX;

  var body = document.getElementsByTagName('body');
  body[0].appendChild(div);

  //you can easily destroy in 2 seconds using set timeout
  setTimeout(function(){
    body[0].removeChild(div);
  }, 2000)
}

Try it. This code will create a div element in the position where you click your mouse.

how do i create a new div element at the cursors position without jquery

2 Answers2

Linked