如何基于JS复制含按钮与对象的HTML任务模板区块？

问题说明 #

需要复制index文件中带预设行、编辑/完成按钮的tasks任务区域，尝试修改区块ID后未生效，原以为仅修改ID即可，现寻求解决方法。

核心问题原因 #

原JS代码硬编码读取了固定ID的模板（script#task-template），仅修改HTML模板的ID但不同步调整JS中的选择器，会导致新模板无法被正确调用；另外若要生成多个任务行，需确保模板复用逻辑正确，而非重复复制模板代码。

分步解决方法 #

1. 复制并修改HTML模板（如需独立任务区域） #

如果是要创建另一个独立的任务区域（比如“待办任务”和“已完成任务”），复制原有模板并设置新的唯一ID，同时保留预设结构：

<!-- 原任务模板 -->
<script type="text/html" id="task-template">
  <div class="task-left">
    <input type="checkbox" id="" name="">
    <label for="" class="task-item"></label>
  </div>

  <div class="task-right">
    <button class="task-btn" name="edit" title="编辑任务"><i class="eos-icons">edit</i></button>
    <button class="task-btn" name="complete" title="完成任务"><i class="eos-icons">done</i></button>
  </div>
</script>

<!-- 复制后的新任务模板 -->
<script type="text/html" id="new-task-template">
  <div class="task-left">
    <input type="checkbox" id="" name="">
    <label for="" class="task-item"></label>
  </div>

  <div class="task-right">
    <button class="task-btn" name="edit" title="编辑任务"><i class="eos-icons">edit</i></button>
    <button class="task-btn" name="complete" title="完成任务"><i class="eos-icons">done</i></button>
  </div>
</script>

<!-- 编辑模板同样复制（如果新区域需要编辑功能） -->
<script type="text/html" id="task-edit-template">
  <div class="form-group">
    <div class="input-group">
      <input type="text" placeholder="请输入任务描述">
      <button name="save" class="primary"><i class="eos-icons">save</i></button>
      <button name="cancel" class="warn"><i class="eos-icons">cancel</i></button>
    </div>
  </div>
</script>

<script type="text/html" id="new-task-edit-template">
  <div class="form-group">
    <div class="input-group">
      <input type="text" placeholder="请输入任务描述">
      <button name="save" class="primary"><i class="eos-icons">save</i></button>
      <button name="cancel" class="warn"><i class="eos-icons">cancel</i></button>
    </div>
  </div>
</script>

2. 修改JS代码，支持调用新模板 #

调整原init方法，允许传入模板ID参数，避免硬编码：

// 修改init方法，增加templateId参数，默认使用原模板ID
init(templateId = 'task-template') {
  this.#element = document.createElement('div');
  this.#element.className = 'task';
  // 根据传入的ID读取对应模板内容
  this.#element.innerHTML = document.querySelector(`script#${templateId}`).textContent;

  const inp = this.#element.querySelector('input');
  inp.id = `task-${this.#model.id}`;
  inp.name = inp.id;
  const lbl = this.#element.querySelector('label');
  lbl.htmlFor = inp.id;
  lbl.textContent = this.#model.description;

  const editBtn = this.#element.querySelector('.task-right button[name=edit]');
  let hdlr = new Handler('click', editBtn, () => this.edit());
  this.#handlers.push(hdlr);

  const compBtn = this.#element.querySelector('.task-right button[name=complete]');
  hdlr = new Handler('click', compBtn, () => this.complete());
  this.#handlers.push(hdlr);

  return this.#element;
}

// 调用示例：生成原任务区域的任务项
const originalTask = new TaskModel({id: 1, description: '原任务'});
originalTask.init();

// 调用示例：生成新任务区域的任务项
const newTask = new TaskModel({id: 2, description: '新任务'});
newTask.init('new-task-template');

3. 若仅需生成多个任务行（复用同一模板） #

如果只是要在同一任务区域生成多个预设任务行，无需复制模板，直接循环调用init方法即可：

// 预设任务数据
const presetTasks = [
  {id: 1, description: '预设任务1'},
  {id: 2, description: '预设任务2'},
  {id: 3, description: '预设任务3'}
];

// 循环生成任务项并添加到页面
presetTasks.forEach(taskData => {
  const task = new TaskModel(taskData);
  document.querySelector('.tasks-container').appendChild(task.init());
});

关键注意事项 #

• 所有DOM元素的ID必须唯一：JS中生成的task-${this.#model.id}确保每个任务的复选框ID不重复，避免label关联错误
• 模板ID需与JS选择器严格对应：修改模板ID后，必须同步调整JS中querySelector的参数
• 事件绑定需确保每个任务项的独立逻辑：原代码中使用Handler类绑定事件，需确保每个任务的事件回调正确指向自身实例

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