html解析器不可干预，所有节点插入均在dom树上进行：appendchild()插末尾且需父节点存在；insertbefore()需指定直属子节点作参考；insertadjacenthtml()支持字符串但不触发自定义元素钩子；批量操作应使用documentfragment优化性能。
直接在 HTML 解析引擎里“插入节点”这个说法本身不成立——浏览器的 HTML 解析器（HTML parser）只在初始加载时运行，不可干预、不可重入，也不会暴露 API 给 JS 调用。你真正能操作的，是解析完成后的 DOM 树。所有“插入节点”的行为，都是在已构建的 DOM 上用 JavaScript 方法完成的。
appendChild() 只能插到父节点末尾，但必须确保父节点存在
这是最常用也最容易出错的方法。它不接受 HTML 字符串，只接受 Node 实例，比如 document.createElement() 返回的对象。
-
appendChild()会把节点移到目标父节点的lastChild之后，如果节点已在 DOM 中，会先从原位置移除 - 常见错误：
document.getElementById('container').appendChild(div)报错Cannot read property 'appendChild' of null——说明container元素还没加载或 ID 写错了 - 不要在
DOMContentLoaded之前执行，否则getElementById返回null - 对自定义元素（如
<my-button></my-button>），必须先用customElements.define()注册，再createElement()，否则插入的是HTMLUnknownElement，生命周期钩子不会触发
insertBefore() 的 referenceNode 必须是父节点的直属子节点
这个方法比 appendChild() 灵活，但参数校验更严格：第二个参数（参考节点）如果不是调用者的直接子节点，会抛 NotFoundError。
- 正确写法：
parent.insertBefore(newEl, parent.children[0])—— 用children（只含元素节点），别用childNodes（含文本、换行等杂节点） - 想插到开头？传
parent.firstChild；想插到末尾？传null（此时等效于appendChild） - 错误顺序：
newEl.insertBefore(parent, ref)会报TypeError: newEl.insertBefore is not a function，因为只有父节点有这方法 - 如果
ref是undefined或null以外的假值（如0、false），也会静默失败或抛错
insertAdjacentHTML() 支持字符串插入，但不触发自定义元素生命周期
它绕过了节点创建步骤，直接把 HTML 字符串解析并插入，适合快速批量渲染，但有明确限制。
- 位置参数必须是字符串：
'beforebegin'、'afterbegin'、'beforeend'、'afterend'；写错（如'beforeEnd'）会静默忽略 - 插入的自定义标签（如
<my-card></my-card>）若未提前define，就只是普通未知标签，connectedCallback不执行 - 用
innerHTML +=更危险：会重新解析整个内容，导致已有事件监听器丢失、表单状态清空、焦点丢失 - 如果 HTML 字符串来自用户输入，必须先做 XSS 过滤，或改用
DOMParser+document.importNode()安全解析
DocumentFragment 批量插入时性能关键，但容易被忽略
一次性插入几十个节点时，逐个 appendChild() 会引发多次重排重绘；用 DocumentFragment 缓存后再挂载，是唯一可靠优化手段。
- 创建方式：
const frag = document.createDocumentFragment()，然后往它里面appendChild()多个节点 - 最后只调用一次
parent.appendChild(frag)—— 此时 frag 内所有子节点被移动过去，frag 自身变空 - 注意：
frag不是真实 DOM 节点，不能添加 class、设置 style，也不能被 CSS 选中 - 现代框架（如 React）内部大量使用类似机制，但手写 DOM 操作时，这点常被跳过，导致列表滚动卡顿
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
