Как создать множество "div" по клику мышки

Question

Как сделать так, чтобы по каждому клику мыши появлялся новый "div" с классом и координатами курсора(top, left), но при этом не исчезал предыдущий(на чистом JS)? Один у меня получился отлично, но как их сделать много? В интернете такой информации не нашёл, может кто знает?

"use strict";
/*******************************************/
const wrap = document.querySelector(".wrapper");
const block = document.querySelector(".block");

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

  block.classList.add("star");
  block.style.cssText = `
    top: ` + (event.clientY - 9) + `px;
    left : ` + (event.clientX - 10) + `px;
    `;
});

.star {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 5px;
}

<div class="wrapper">
  <div class="block"></div>
</div>

Answer 1

Для возможности, по щелчку мыши, создавать новый div и отображать его по координатам клика, надо:

В колбэк-функции события щелчка мыши создавать динамически div и добавлять его в контейнер

const wrap = document.querySelector(".wrapper");

document.addEventListener("click", function(event) {
  // Создаем div элемент
  const block = document.createElement('div');
  block.classList.add("star");
  block.style.cssText = `
    top: ` + (event.clientY - 9) + `px;
    left : ` + (event.clientX - 10) + `px;
    `;
  // Добавляем его в контейнер
  wrap.appendChild(block);
});

.star {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 5px;
}

<div class="wrapper"></div>

Ваш вариант рассчитан только для работы с 1 единственным, заранее подготовленным div

БЛОГ НА HUSL

Как создать множество "div" по клику мышки

Ответы (1 шт):