createElement创建的节点默认不显示，必须用appendChild等方法插入到文档流中；需确保父元素存在且已加载，参数必须为Node实例，批量操作推荐DocumentFragment，事件绑定应在插入后进行。
createElement 创建的节点默认不显示，必须显式插入到文档流中
调用 document.createElement() 只是生成一个“游离”的 DOM 节点对象，它不在页面上，也不参与渲染。必须用 appendChild()、insertBefore() 或其他插入方法挂载到已有元素下，才能被浏览器绘制。
常见错误：只创建没插入，或插入到 null / 不存在的父节点，控制台报错 Cannot read property 'appendChild' of null。
- 确保目标父元素已存在且已加载完成（DOM 加载完再执行，比如放在
DOMContentLoaded事件里，或 script 放在 body 底部） - 用
document.getElementById()或document.querySelector()获取父节点前，先检查返回值是否为null - 不能把节点直接 append 到
document对象（除非是document.documentElement或document.body），否则会报错
appendChild 只接受单个 Node，传入数组或字符串会报错
appendChild() 的参数类型严格限定为 Node 实例（如 Element、Text、DocumentFragment）。传入字符串、数组、数字或 undefined 都会触发 TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'。
- 字符串需先转成文本节点：
document.createTextNode("hello")，再 append - 要批量插入多个节点，要么循环调用
appendChild()，要么先用DocumentFragment统一收集，再一次性插入（性能更好） - 避免误写成
parent.appendChild([el1, el2])或parent.appendChild("text")
示例正确写法：
const frag = document.createDocumentFragment();
frag.appendChild(document.createElement("div"));
frag.appendChild(document.createTextNode("content"));
document.body.appendChild(frag); // 一次插入，减少重排
动态创建的元素绑定事件要注意作用域和时机
用 createElement 创建的元素，其事件监听器必须在节点插入 DOM 后绑定（或提前绑定但确保 this 指向正确），否则点击等行为无效；若使用事件委托，则可绕过该限制。
- 直接绑定：在
appendChild()之后立即调用element.addEventListener() - 避免在循环中用闭包变量（如
for (let i...) {...}）时误捕获索引，推荐用let声明或事件委托 - 如果元素后续会被移除又重建，直接绑定的监听器不会自动销毁，可能造成内存泄漏；委托到稳定父容器更安全
innerHTML 替代方案？别滥用，注意 XSS 和性能权衡
有人倾向用 parent.innerHTML += " 替代 createElement + appendChild，但这是危险且低效的做法。
- 拼接字符串插入会**重置整个 innerHTML 内容**，导致已绑定的事件丢失、表单输入清空、焦点丢失
- 若插入内容含用户输入，未转义直接拼接会引发 XSS 漏洞（
innerHTML不做任何过滤） - 频繁修改
innerHTML触发多次 DOM 解析与重排，性能明显差于原生节点操作 - 仅当内容极简单、无交互、且确定无用户输入时，才考虑临时用
innerHTML
真正需要模板化时，优先用 template 标签 + content.cloneNode(true)，或现代框架的渲染机制。
实际项目里最常出问题的不是语法，而是节点插入时机不对、父容器查找不到、以及事件绑定在“幽灵节点”上——这些地方多加一行 console.log(parent) 就能省掉半小时调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
