如何高效生成/复用DOM相似节点？分类标签克隆方案优化咨询

嘿，你的这个场景我太熟悉了——用cloneNode确实能解决问题，但总觉得有点绕，尤其是还要处理子元素的克隆、替换文本和重新插入input，不仅逻辑冗余，还可能因为原节点的隐藏属性/事件监听带来意外问题。这里有几个更简洁易维护的实现方式，你可以参考下：

方案1：使用模板字符串（Template Literals） #

直接用模板字符串拼接完整的HTML结构，代码直观易懂，一眼就能看到最终的DOM结构：

function createCategoryLabel(subcategory) {
  return `
    <label class="btn btn-outline-primary">
      <input type="radio" value="${subcategory.id}">
      ${subcategory.name}
    </label>
  `;
}

// 使用示例：插入到目标容器
container.insertAdjacentHTML('beforeend', createCategoryLabel(subcategory));

注意：如果subcategory.name是用户输入的内容，要注意XSS风险，可以先对内容进行转义（比如手动转义特殊字符或使用专门的转义工具）。

方案2：手动构建DOM元素（最安全可控） #

完全从头创建DOM元素，避免克隆带来的冗余，逻辑清晰，也不用担心XSS问题：

function createCategoryLabel(subcategory) {
  // 创建label元素
  const label = document.createElement('label');
  label.className = 'btn btn-outline-primary';

  // 创建radio input
  const radioInput = document.createElement('input');
  radioInput.type = 'radio';
  radioInput.value = subcategory.id;

  // 添加文本节点
  const textNode = document.createTextNode(subcategory.name);

  // 组装元素
  label.appendChild(radioInput);
  label.appendChild(textNode);

  return label;
}

// 使用示例：插入到目标容器
container.appendChild(createCategoryLabel(subcategory));

这个方案的优势是完全掌控每个元素的属性，不会引入原节点的任何多余内容，适合对安全性和可控性要求高的场景。

方案3：使用HTML