What is the method of generating a new div element at the cursor's location without using jQuery?

edit

Here is an example of how to generate a new div element at the cursor's location using JavaScript without using jQuery:

1. First, create a function that will create a new div element and append it to the body of the HTML document:

function createDiv() {
  let newDiv = document.createElement("div");
  document.body.appendChild(newDiv);
}

1. Next, create an event listener that will capture the mouse click event:

document.addEventListener("click", function(event) {
  // Code to be executed when mouse click event occurs
});

1. Within the event listener function, update the coordinates of the new div element by setting its left and top CSS properties based on the clientX and clientY coordinates of the mouse click event:

document.addEventListener("click", function(event) {
  let newDiv = document.createElement("div");
  document.body.appendChild(newDiv);

  newDiv.style.left = event.clientX + "px";
  newDiv.style.top = event.clientY + "px";
});

1. Finally, call the createDiv() function when the event listener is triggered to generate the new div element:

document.addEventListener("click", function(event) {
  createDiv();

  let newDiv = document.createElement("div");
  document.body.appendChild(newDiv);

  newDiv.style.left = event.clientX + "px";
  newDiv.style.top = event.clientY + "px";
});