动态创建元素应使用 document.createElement 配合 appendChild/insertBefore，避免 innerHTML +=；需设置必要属性和文本内容；insertAdjacentHTML 适用于嵌套结构但需防 XSS；事件委托更高效；注意 DOM 渲染时机，用 requestAnimationFrame 获取准确尺寸。
点击按钮后用 document.createElement 动态生成元素
直接调用 document.createElement 创建新节点，再用 appendChild 或 insertBefore 插入到目标容器里。别用 innerHTML += 拼接字符串——它会重绘整个容器内容，已绑定的事件监听器、表单输入值都会丢失。
常见错误是创建完元素没设置必要属性（比如 id、class）或没加文本内容，导致元素“看不见”或无法交互：
-
const btn = document.createElement('button');创建后要手动设btn.textContent = '点我'; - 如果插入的是表单控件（如
input），记得设type属性，否则默认是text，可能不符合预期 - 避免在循环中反复调用
document.getElementById查找同一父容器，应提前缓存引用
用 insertAdjacentHTML 快速插入带结构的 HTML 片段
当要插入的是一小段含嵌套结构的 HTML（比如带 class 的 div 包着 span），insertAdjacentHTML 比手动创建多个节点更简洁。它支持四个插入位置：'beforebegin'、'afterbegin'、'beforeend'、'afterend'，对应父元素外部前/内部首/内部尾/外部后。
注意 XSS 风险：传入的字符串不能直接拼接用户输入。若内容来自用户，必须先用 textContent 赋值或手动转义 <、>、& 等字符；否则执行 insertAdjacentHTML('beforeend', '<img src=x onerror=alert(1)>') 会触发脚本。
立即学习“前端免费学习笔记（深入）”；
示例：
btn.addEventListener('click', () => {<br> container.insertAdjacentHTML('beforeend', '<div class="item"><p>新条目</p></div>');<br>});
事件委托解决动态添加元素的事件绑定问题
用 JS 新增的按钮，如果直接写 newBtn.addEventListener('click', ...) 是有效的；但如果你批量插入几十个按钮，每个都绑一次监听器，内存和性能都不划算。更通用的做法是给父容器设事件委托——监听冒泡上来的事件，再用 event.target 判断是否命中目标元素。
关键点：
- 父容器必须存在且不被替换，否则委托失效
- 匹配条件别写太宽泛，比如用
if (e.target.matches('.dynamic-btn'))，而不是e.target.tagName === 'BUTTON'，防止误触子元素 - 如果新元素需要初始化状态（如 checkbox 默认 checked），得在创建时显式设置
checked = true，事件委托只管响应，不管初始化
IE8 及更老浏览器不支持 insertAdjacentHTML 怎么办
IE8 支持 insertAdjacentHTML，但 IE7 及以下不支持。如果项目仍需兼容这些古董，可用 innerHTML + insertBefore 组合模拟，或者引入一个轻量 polyfill。不过更现实的建议是：确认真实用户环境——现在绝大多数生产项目已可安全使用 insertAdjacentHTML。
真正容易被忽略的是 DOM 更新时机：插入操作同步完成，但渲染可能延迟一帧。如果紧接着读取新元素的 offsetHeight 或 getBoundingClientRect()，有时会拿到 0。这时可用 requestAnimationFrame 延迟到下一次绘制前读取：
container.appendChild(newEl);<br>requestAnimationFrame(() => {<br> console.log(newEl.offsetHeight); // 确保已渲染<br>}); 
