动态添加表单控件必须用 document.createElement，禁用 innerHTML；需设唯一 name、用 value 而非 setAttribute 设初始值；删除时须解绑事件并兼容 IE11；用 dataset.index 标识顺序；提交前确保控件已插入 form 且有 name 属性。
动态添加表单控件必须用 document.createElement，不能靠字符串拼接 innerHTML
直接修改 innerHTML 会重置已绑定的事件、清空用户输入、丢失焦点，且在某些浏览器中会破坏 的 selected 状态。正确做法是创建元素后逐个设置属性和事件。
- 用
document.createElement('input')创建新控件，再用setAttribute()设置type、name、id等 - 为避免 name 重复，建议用计数器或时间戳生成唯一
name，例如name="field_" + Date.now() - 若需初始值，设
element.value = "xxx"，而非setAttribute('value', 'xxx')（后者只影响初始 HTML 属性）
删除控件时要同时清理事件监听器和 DOM 引用
仅调用 removeChild() 或 element.remove() 不足以彻底释放资源，尤其当该控件曾绑定过 addEventListener 时。
- 推荐统一管理控件容器（如 ），所有动态控件都挂在其下
- 删除前先调用
element.removeEventListener()（需保留对监听函数的引用），或改用事件委托避免逐个解绑- 注意：IE11 不支持
element.remove()，应使用parent.removeChild(element)用
data-index或dataset标识控件顺序，别依赖 DOM 位置用户可能拖拽、排序或异步加载控件，此时
parentNode.children[index]容易错位。用自定义属性显式标记逻辑序号更可靠。- 添加时写入：
newInput.dataset.index = currentIndex++ - 删除时可通过
event.target.closest('[data-index]').dataset.index快速定位 - 提交前遍历所有
[data-index]元素，按dataset.index排序后再收集值，确保顺序一致
表单验证和序列化需手动适配动态字段
HTML5 原生
checkValidity()和FormData能识别动态添加的控件，但前提是它们已插入到内且未被disabled或display: none隐藏。立即学习“前端免费学习笔记（深入）”；
- 插入后立即调用
form.checkValidity()可能返回false—— 因为浏览器尚未完成渲染，建议加requestAnimationFrame延迟校验 - 用
new FormData(form)获取全部字段没问题，但若控件没有name属性，它会被忽略（这是最常漏掉的一点） - 若需 JSON 提交，别用
JSON.stringify(form)，而应遍历form.elements，过滤掉name === ""的项
const container = document.getElementById('fields-container'); let index = 0; function addField() { const input = document.createElement('input'); input.type = 'text'; input.name = `dynamic_field_${index}`; input.dataset.index = index++; input.required = true; const removeBtn = document.createElement('button'); removeBtn.type = 'button'; removeBtn.textContent = '×'; removeBtn.onclick = () => { input.remove(); removeBtn.remove(); }; container.appendChild(input); container.appendChild(removeBtn); }动态增删本身不难，难的是让每个新增控件在验证、提交、重绘、销毁环节都不掉链子——尤其是name属性缺失、事件残留、dataset 同步滞后这三处，90% 的线上问题都出在这儿。 - 删除前先调用
