如何在返回HTML模板的函数中动态生成对应数量的标签元素？

我正在开发一款支持为任务添加标签的简易待办应用，将带有tags字段的任务对象数组存储起来，用户添加任务时先存入localStorage，再更新页面DOM。

以下是更新DOM的函数：

function createTaskTemplate(task, index) {
  return `
   <div class="task flex">
     <input type="checkbox" class="check-task" onclick="checkTask(${index})" 
     ${task.done ? 'checked' : ''}>

     <p class="task-text ${task.done ? 'task-checked' : ''}">${task.name}</p>


     // ========= PROBLEM PART ==============


     // *Below I create the ul tag that must append a certain amount of li tags*

     <ul class="tags"></ul>

     // *And here I want to loop over the task's tags, create HTML for them, and put them in the ul created above*

     ${task.tags.forEach((tag, index) =>
       document
         .querySelector('.tags')
         .appendChild((document.createElement('li').textContent = tag[index]))
     )}

     // =====================================
   </div>`;
}

运行时出现错误：Uncaught TypeError: document.querySelector(...) is null。我知道这是因为执行该代码时任务还未挂载到DOM中。我曾考虑先统计tags数组的长度，再在模板中动态生成对应数量的li标签，但不确定是否可行。请问该如何解决这个问题？

解决思路 #

你不能在模板字符串里直接操作DOM，因为此时生成的HTML还只是字符串，没有被插入到页面中，document.querySelector('.tags')自然找不到元素。正确的做法是在模板字符串里直接拼接出所有标签的HTML代码，而不是事后去操作DOM。

修正后的代码 #

把原来的forEach换成map（map会返回新数组，适合生成HTML片段），再用join('')把数组元素拼接成字符串，直接嵌入到模板里：

function createTaskTemplate(task, index) {
  // 先把tags数组转成li标签的字符串
  const tagsHtml = task.tags.map(tag => `<li>${tag}</li>`).join('');

  return `
   <div class="task flex">
     <input type="checkbox" class="check-task" onclick="checkTask(${index})" 
     ${task.done ? 'checked' : ''}>

     <p class="task-text ${task.done ? 'task-checked' : ''}">${task.name}</p>

     <ul class="tags">${tagsHtml}</ul>
   </div>`;
}

为什么这样可行 #

1. map遍历task.tags，每个标签生成对应的<li>字符串，得到一个包含所有li标签的数组
2. join('')把数组里的所有字符串拼接成一个完整的HTML片段
3. 把这个片段直接插入到<ul class="tags">内部，生成的整个模板字符串包含了完整的任务+标签结构，插入DOM后就能直接显示所有标签

额外说明 #

• 模板字符串的核心作用是生成HTML结构的字符串，不要在其中调用DOM操作方法
• 如果标签内容可能包含特殊字符（比如<、>），可以用textContent避免XSS风险，示例：

  const tagsHtml = task.tags.map(tag => {
    const li = document.createElement('li');
    li.textContent = tag;
    return li.outerHTML;
  }).join('');
  

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