How create HTML element in certain X and Y positions

Question

I have a simple project idea, the project is that you click on the display and create a point and click again to make the second point and connect these two points, my problem is how to create HTML elements in the same mouse position. For example, I click on the position: X: 69, Y: 41 I want to create the HTML element in the same position, I know how to get the mouse position:

const mousePos = (e: PointerEvent) => {
  const _Xpos: number = e.clientX;
  const _Ypos: number = e.clientY;
};
window.addEventListener("click", mousePos);

Answer 1

If you only want to compose an image, then I recommend you better using a canvas.

However, If you want HTML, you'd need a fullscreen container (div height:100vh, width:100wh or 100%) with position relative.

Then, on click, you add a child to it with position absolute and left=x top=y.

To make it easy, better use css for positioning:

.container { position: relative; } .container > * { position: absolute; }

then, on click:

const e = document.createElement("div");
container.appendChild(e);
e.style.top = _Xpos + "px";
e.style.left = _Ypos + "px";