最稳妥的动态添加元素方式是使用 document.createElement 配合 DOM API：先创建干净节点，用 setAttribute 或直接赋值设属性，textContent 设文本，DocumentFragment 批量插入，insertBefore/before/after 精确控制位置，事件优先委托，框架中避免直接操作 DOM。
用 document.createElement 创建元素最稳妥
直接拼接字符串用 innerHTML 虽快，但容易 XSS、破坏事件绑定、触发重排。真正安全可控的动态添加，得走 DOM API 路线。document.createElement 是起点，它返回干净的原生节点，不执行脚本，也不解析 HTML。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先用
document.createElement('div')创建元素，再用setAttribute或直接赋值elem.className = 'box'设置属性 - 文本内容统一走
textContent（防 XSS）而非innerHTML，除非你明确需要解析 HTML - 如果要批量插入，先用
DocumentFragment缓存所有新节点，最后一次性appendChild到目标容器，减少重排次数
插入位置选错会导致元素“看不见”或“乱序”
常见错误是调用 appendChild 后发现元素没出现在预期位置——其实它永远插在末尾。要精确控制顺序，得用 insertBefore 或现代的 before/after 方法。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 想插到某个元素前面？用
targetElement.before(newElement)（IE 不支持，需兼容时 fallback 到parentNode.insertBefore(newElement, targetElement)） - 想替换旧元素？别删再加，直接用
oldElement.replaceWith(newElement)，语义清晰且保持父节点引用 - 往表单里动态加
<option></option>？必须插到<select></select>内部，且确保value和textContent都设对，否则选中时取不到值
动态添加后事件监听器不生效？别漏了委托或重新绑定
用脚本新增的按钮，addEventListener 绑在老节点上自然捕获不到——因为事件监听器是在添加前就注册好的。这不是 bug，是 DOM 事件机制的正常表现。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用事件委托：给父容器（比如
document.getElementById('list')）绑定一次click，再用event.target.matches('.btn-delete')判断来源 - 如果必须单独绑定，就在创建完新元素、插入 DOM 后立刻调用
newBtn.addEventListener('click', handler)，顺序不能颠倒 - 避免重复绑定：检查是否已存在同类型监听器，或者用
element.addEventListener(type, handler, { once: true })控制生命周期
React/Vue 项目里硬塞原生 DOM 元素容易出问题
框架会接管 DOM 更新逻辑，你用 document.createElement 手动插入，可能被下一次渲染覆盖，或与虚拟 DOM 状态不同步，轻则样式丢失，重则触发 React 的 “Warning: Did not expect server HTML to contain…” 类错误。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 纯静态内容（比如埋点 script、第三方 widget 容器）可用
useEffect+appendChild，但务必加 cleanup 清理 - 业务逻辑相关的 UI 变更，一律走组件 state + 条件渲染，例如
{showPanel && <panel></panel>}，而不是手动div.appendChild(panelEl) - 实在要混用（如地图 SDK），确保插入容器是框架明确标记为“不管理”的区域，比如加
data-no-vue属性并配置v-pre或dangerouslySetInnerHTML的边界
动态添加本质是“让 JS 控制 DOM 生命周期”，关键不在怎么加，而在加完之后谁负责更新、谁负责清理、谁拥有所有权。跨框架场景尤其要划清边界，不然修一个 bug 会带出三个新问题。
