动态添加的dom节点未绑定事件，需用事件委托；name属性须唯一（如emails[0]）；创建元素应使用dom方法而非innerhtml拼接；提交前用formdata确保数据同步。
点击按钮后新增一行输入框，但新行不响应事件
问题本质是：动态添加的 DOM 节点没绑定事件监听器。原生 addEventListener 只对已存在的元素生效，新插入的 <button class="remove-row"></button> 没被监听。
解决方式是用事件委托——把监听器绑在父容器上，利用事件冒泡捕获子元素触发：
document.getElementById('form-container').addEventListener('click', function(e) {
if (e.target.classList.contains('add-row')) {
addInputRow();
} else if (e.target.classList.contains('remove-row')) {
e.target.closest('.input-group').remove();
}
});
- 别给每个新按钮单独调用
addEventListener，容易内存泄漏且逻辑分散 -
e.target.closest('.input-group')比e.target.parentElement.remove()更安全，避免误删非直接父级 - 确保容器有唯一 ID（如
form-container），否则委托失效
新增行里 input 的 name 属性重复导致后端收不到全部数据
常见写法是固定写 name="email"，结果所有行都提交同名字段，后端只收到最后一个值。
必须让每行 name 带唯一标识，推荐用数组语法或带序号的命名：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<input type="email" name="emails[0]"><input type="email" name="emails[1]">
- PHP 后端自动解析为
$_POST['emails']数组；Node.js +body-parser也支持这种格式 - 如果用
name="email_0"这类命名，后端需手动遍历提取，不推荐 - 删除某行后，不要重排索引（比如把 [2] 改成 [1]），否则破坏原有数据顺序，应由后端按实际提交内容处理
用 innerHTML 拼接字符串新增行，结果 value 和 placeholder 乱码或被转义
直接拼接字符串时，若用户输入含 &、 等字符，再插入到 HTML 会变成实体编码，显示异常甚至 XSS 风险。
正确做法是用 DOM 方法创建元素，显式设置属性和文本内容：
const row = document.createElement('div');
row.className = 'input-group';
const input = document.createElement('input');
input.type = 'text';
input.name = `titles[${nextIndex}]`;
input.placeholder = '请输入标题';
row.appendChild(input);
document.getElementById('form-container').appendChild(row);
- 避免
innerHTML += '...'，这是最易出错的写法 - 如果必须用字符串模板，至少对动态内容做
textContent设置，或用DOMPurify.sanitize()处理（仅限可信场景） -
placeholder、value、name全部通过属性/属性方法赋值，不混入 HTML 字符串
表单提交时，最后一行刚输入的内容没被包含进去
典型现象：用户快速点“添加”→ 在新行输文字 → 点提交，但后端收不到这行数据。原因是输入框还没失焦（blur），某些框架或序列化逻辑依赖 change 事件触发更新。
- 提交前主动触发一次
input.dispatchEvent(new Event('input', { bubbles: true }))，确保最新值同步到 DOM 属性 - 更稳妥的是提交时用
FormData构造对象：new FormData(formElement)，它读取的是当前 DOM 状态，不依赖事件 - 不要靠
form.onsubmit里手动收集input.value，容易漏掉动态生成的节点或 disabled 字段
动态增删的核心不是“加减 DOM”，而是维持数据与视图的一致性。每次操作后，检查 name 是否唯一、事件是否可达、提交路径是否覆盖全部节点——这三个点卡住，八成问题就解决了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
