appendChild 是移动而非复制节点，传入已存在节点会先移除再插入；不支持字符串或数组，需转为 Node 类型；重复添加须 cloneNode；注意 value 保留但焦点和选区丢失。

appendChild 会修改原 DOM 树，不能重复添加同一节点

直接调用 appendChild 时，如果传入的节点已经存在于文档中，它会被自动从原位置移除，再插入到新父节点末尾。这不是复制，而是移动——这是最常被忽略的行为。

• 想重复添加，必须先用 cloneNode(true) 创建副本
• 若目标节点是通过 document.querySelector 获取的，它已有父元素，直接 append 会导致“消失”现象
• 对刚用 document.createElement 创建的节点，没有父节点，可安全添加多次（但每次仍是同一个引用）

appendChild 只接受 Node 类型，不支持字符串或数组

传入字符串会静默失败（控制台无报错），但实际什么也不发生；传入数组会抛出 TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'。

• 字符串需先转为元素：document.createTextNode("text") 或 element.innerHTML = "html"（但后者不推荐用于动态插入）
• 多个节点要逐个 append，不能 parent.appendChild([el1, el2])；可用 append()（现代 API，支持多参数和字符串）替代
• 注意 append() 和 appendChild() 的浏览器兼容性差异：IE 完全不支持 append()

appendChild 后节点立即生效，但样式/布局可能未就绪

节点插入后即成为 DOM 的一部分，getBoundingClientRect() 或 offsetHeight 可能返回 0，尤其在 CSS 尚未加载或存在 display: none 父容器时。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 需要测量尺寸时，确保父元素已渲染且可见（例如不在 display: none 容器内）
• 避免在循环中频繁 append 多个节点——性能差；应使用 DocumentFragment 批量插入
• 若依赖插入后的样式计算，可加 requestAnimationFrame 延迟读取，或用 offsetParent !== null 判断是否已挂载

用 appendChild 添加表单控件时 value 不会自动保留

当把一个已有 input 元素（比如用户已输入内容的）用 appendChild 移动到新位置，其 value 属性值仍然存在，但部分旧版浏览器（如 IE）可能丢失光标位置或触发重置行为。

立即学习“前端免费学习笔记（深入）”；

• value 是属性（property），不是 HTML 属性（attribute），所以不会因移动而清空
• 但 input 的 selectionStart/selectionEnd 会丢失，焦点也会取消
• 如需保持焦点和选区，移动后手动调用 el.focus() 和 el.setSelectionRange()

真实项目里最容易栽在“以为 appendChild 是复制操作”和“把字符串当节点传进去”这两点上。DOM 操作看着简单，但每个节点都有唯一身份，动它就得想清楚是搬、是克隆，还是干脆换 API。