必须用 <template> 因为它能真正暂停表单控件生命周期，避免验证触发、资源加载和脚本执行；而 display: none 或 hidden 会导致验证失败、DOM 污染和无效 HTTP 请求。
为什么必须用 <template> 而不是 display: none 或 hidden
因为只有 <template> 能真正“暂停”表单控件的生命周期：不触发 required 验证、不加载 <img src>、不执行内联 <script>。用 <div style="display:none"> 包裹模板，Safari 会直接报 Constraint validation failed，Chrome 可能静默失败但污染 document.querySelectorAll('option') 结果。更隐蔽的问题是：哪怕只是装饰性头像占位图，也会发起 HTTP 请求，拖慢首次渲染。
template.content.cloneNode(true) 是唯一安全克隆路径
常见错误包括：template.innerHTML 永远为空字符串；template.children 返回空列表；template.content.cloneNode(false) 只克隆一个空 fragment。正确写法必须满足三个条件：
- 必须从
template.content取内容，不能直接操作<template>元素本身 - 必须传
true参数，否则得不到可操作的 input/select 节点 - 克隆后若直接
appendChild(instance)，第二次调用会失败——节点已被移走，需每次重新cloneNode(true)
name/id/for 属性冲突必须动态重置
多次克隆含 <input name="email"> 的模板，会导致多个同名字段，表单提交时后一个值覆盖前一个（浏览器只取最后一个）。不能删掉 name，而应动态生成唯一标识：
- 用
setAttribute('name', `email-${index}`)或更稳妥的数组式命名：setAttribute('name', 'user[emails][]') -
id和for必须同步更新，否则<label for="email-0">指向失效 - 避免用
querySelectorAll('input').length算索引——用户手动删除某项后，DOM 数量变少，但旧name="email-2"仍存在并提交
导出 JSON 不是读 DOM，而是维护独立 schema
直接 form.querySelectorAll('input').forEach(...) 拼 JSON，拿到的只是当前值，不是字段定义。容易踩的坑包括：contenteditable 改 label 导致回车换行、粘贴富文本、光标错位；用 innerHTML 拼接导致事件丢失、value 同步失败。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 每次添加字段，往
schema数组 push 一条配置对象，含type、id、label、required等元信息 - 给每个字段元素加
data-field-id="field_1723456789"，实现 DOM 与 schema 双向映射 - 导出按钮触发的是
JSON.stringify(schema)，不是遍历 input
最易被忽略的是：name 的语义一致性比 DOM 操作本身更关键——只要统一用 name="items[]"，浏览器自动聚合成数组，后端开箱即用；一旦混用 items[0] 和 items[1]，删一项就丢数据。
