Добавление div с уникальным id по кнопке JS

хотел бы задать вопрос, мне нужно, чтобы при нажатии на кнопку, создавался div со своим уникальным id например:

<div>
<id="1">
<id="2">
<id="3">
<id="4">
<id="5">
</div>

при клике на кнопку создаётся новый div но уже с

<div>
<id="6">
<id="7">
<id="8">
<id="9">
<id="10">
</div>

есть у кого идеи как это можно выполнить???


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

Автор решения: Максим Воробьев
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <button class="btn">Add block</button>
  <div class="list">
    List
  </div>
</body>
</html>  



let list = document.querySelector('.list');
let btn = document.querySelector('.btn');

btn.addEventListener('click', function() {
    let r = Math.random().toString(36).substring(7);
    const newBlock = document.createElement('div');
    newBlock.setAttribute('id', r);
    newBlock.textContent = 'new block'
    list.appendChild(newBlock);
})
→ Ссылка