JavaScript中向空数组推入任务列表的两种写法哪种更优？

我测试了两种将列表推入空数组的实现方式，不确定哪种方案更优，以下是我测试的两种场景。
我的需求是：新创建的任务需要存入空数组，因为新生成的div包含用户创建的任务的全部信息。

JS 场景1 #

// 存储新任务的空数组
let taskList = [];

// 生成带日期、时间信息新任务的函数
const creatTask = (task) => {
  const id = createId();
  
  const taskNew = el.input.value;
  const taskDate = el.date.value;
  const taskTime = el.time.value;

  const tasks = document.createElement("div");

  tasks.innerHTML = `
      
  <div class="task-content">
    <div class="list-of-task">
    <div class="task" data-id="${id}">
    <input type="checkbox" class="tick">
    <div class="new-task-created">${taskNew}</div>
     <label class="due-date">${taskDate}</label>
     <label class="due-time">${taskTime}</label>
  </div>
    <div class="atcion-buttons">
     <button class="edit" data-id="">Edit</button>
     <button class="delete" data-id="">Delete</button>
      </div>
  </div>`;

  taskList.push(tasks);

  el.list.appendChild(tasks);
  return task
};

JS 场景2 #

// 存储新任务的空数组
let taskList = [];

// 生成带日期、时间信息新任务的函数
const creatTask = (task) => {
  const id = createId();
  
  const taskNew = el.input.value;
  const taskDate = el.date.value;
  const taskTime = el.time.value;

  const tasks = document.createElement("div");

  const listTask = tasks.innerHTML = `
      
  <div class="task-content">
    <div class="list-of-task">
    <div class="task" data-id="${id}">
    <input type="checkbox" class="tick">
    <div class="new-task-created">${taskNew}</div>
    <label class="due-date">${taskDate}</label>
    <label class="due-time">${taskTime}</label>
  </div>
  <div class="atcion-buttons">
    <button class="edit" data-id="">Edit</button>
    <button class="delete" data-id="">Delete</button>
  </div>
</div>`;

  taskList.push(listTask);
  console.log(taskList);
  el.list.appendChild(tasks);
  return task
};

方案选择建议 #

直接用场景1的写法就行，别用场景2。

• 场景1推入taskList的是通过createElement真实生成的DOM元素对象，后续要做任务勾选、编辑、删除操作时，直接从数组取对应元素就能调用DOM方法操作，不用额外做解析转换，元素上绑定的事件、关联的状态也不会丢。
• 场景2存的只是innerHTML返回的纯HTML字符串，本质就是一段文本，没有任何DOM操作能力。之后你要改对应任务的时候，还得重新把这段字符串转成DOM结构、重新查找子元素、重新绑定事件，完全是多余的步骤，也就打日志的时候能直接看到HTML文本，实际用起来全是麻烦。
• 顺便提两个代码里的小问题：函数名拼写错了，正确拼写是createTask，你少写了个e；编辑、删除按钮的data-id属性现在是空的，记得把生成的任务id填进去，不然点击按钮的时候匹配不到对应任务。

内容的提问来源于stack exchange，提问作者Sheldon