动态添加表单控件必须用 document.createElement，禁用 innerHTML；需设唯一 name、用 value 而非 setAttribute 设初始值；删除时须解绑事件并兼容 IE11；用 dataset.index 标识顺序；提交前确保控件已插入 form 且有 name 属性。
动态添加表单控件必须用 document.createElement，不能靠字符串拼接 innerHTML
直接修改 innerHTML 会重置已绑定的事件、清空用户输入、丢失焦点，且在某些浏览器中会破坏 <select></select> 的 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 时。
- 推荐统一管理控件容器（如
<div id="fields-container">），所有动态控件都挂在其下 <li>删除前先调用 <code>element.removeEventListener()（需保留对监听函数的引用），或改用事件委托避免逐个解绑 - 注意：IE11 不支持
element.remove()，应使用parent.removeChild(element) - 添加时写入：
newInput.dataset.index = currentIndex++ - 删除时可通过
event.target.closest('[data-index]').dataset.index快速定位 - 提交前遍历所有
[data-index]元素，按dataset.index排序后再收集值，确保顺序一致 - 插入后立即调用
form.checkValidity()可能返回false—— 因为浏览器尚未完成渲染，建议加requestAnimationFrame延迟校验 - 用
new FormData(form)获取全部字段没问题，但若控件没有name属性，它会被忽略（这是最常漏掉的一点） - 若需 JSON 提交，别用
JSON.stringify(form)，而应遍历form.elements，过滤掉name === ""的项
用 data-index 或 dataset 标识控件顺序，别依赖 DOM 位置
用户可能拖拽、排序或异步加载控件，此时 parentNode.children[index] 容易错位。用自定义属性显式标记逻辑序号更可靠。
表单验证和序列化需手动适配动态字段
HTML5 原生 checkValidity() 和 FormData 能识别动态添加的控件，但前提是它们已插入到 <form></form> 内且未被 disabled 或 display: none 隐藏。
立即学习“前端免费学习笔记（深入）”；
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% 的线上问题都出在这儿。
