您可以向其追加以下内容，而不是覆盖list.innerHTML：

let listArray = []

let date = Date.now()
let id = Math.floor((Math.random() + date) * 3000)

let add = document.querySelector("#add")

add.addEventListener("click", (event) => {

  let input = document.querySelector("#User-Input input")
  let list = document.querySelector(".list")
  list.classList.add("todo")

  // HERE!
  list.innerHTML += `
        <div data-type="${id}"></div>
        <p>${input.value}</p>
        ` 

  listArray.push(list)
})

<div class="container">
  <div id="User-Input">

    <input id="text-area" type="text">
    <button id="add">Add</button>
  </div>

  <div class="list">

  </div>

你不需要一个循环（或者数组），现在你是在替换list元素的HTML，而不是在添加它，你可以使用insertAdjacentHTML，它可以让你选择在哪里添加新的HTML，这里我们使用beforeend。
注意，您可以将所有元素缓存到处理程序之外，但是您应该将创建id的代码添加到处理程序内部（或者将其添加到处理程序中调用的单独函数中），以便id对于每个新todo都是不同的。
(In在这个例子中，我也会在每次提交后清空输入框，并将光标重新聚焦在框中，准备输入下一个条目。）

const input = document.querySelector('#User-Input input');
const list = document.querySelector('.list');
const add = document.querySelector('#add')

input.focus();

add.addEventListener("click", (event) => {

  const date = Date.now();
  const id = Math.floor((Math.random() + date) * 3000);

  const html = `
    <div class="todo" data-id="${id}">
      <p>${input.value}</p>
    </div>
  `;

  list.insertAdjacentHTML('beforeend', html);

  input.value = '';
  input.focus();

});

.list { width: 80%; }
.todo { background-color: #efefef;}
.todo p { padding: 0.25em; }

<div class="container">
  <div id="User-Input">

    <input id="text-area" type="text">
    <button id="add">Add</button>
  </div>

  <div class="list"></div>

</div>