动态添加的DOM节点未绑定事件，需用事件委托；name属性须唯一（如emails[0]）；创建元素应使用DOM方法而非innerHTML拼接；提交前用FormData确保数据同步。
点击按钮后新增一行输入框，但新行不响应事件
问题本质是：动态添加的 DOM 节点没绑定事件监听器。原生 addEventListener 只对已存在的元素生效，新插入的 <button class="remove-row"> 没被监听。
解决方式是用事件委托——把监听器绑在父容器上，利用事件冒泡捕获子元素触发：
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 带唯一标识，推荐用数组语法或带序号的命名：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<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 是否唯一、事件是否可达、提交路径是否覆盖全部节点——这三个点卡住，八成问题就解决了。
