createElement创建的节点默认不显示，必须显式插入文档流才能渲染；否则页面空白且无报错。根本原因是节点未挂载到DOM树，需用appendChild等方法插入有效父节点，且须确保父节点存在、时机正确、参数合法，并注意事件绑定时机与节点所有权规则。
createElement 创建的节点默认不显示，必须显式插入到文档流中才能渲染；否则页面空白、控制台无报错，但逻辑已失效。
为什么 createElement 后页面没反应
调用 document.createElement('div') 只是生成一个内存中的 Node 实例，它没有父节点，也不在 DOM 树里。浏览器跳过渲染——这和 CSS 伪元素不同，它不是“自动挂载”的。
- 常见现象：代码执行成功、
console.log(el)能看到元素，但页面完全没变化 - 根本原因：漏掉
appendChild()或插入目标为null - 典型错误：
document.getElementById('container').appendChild(el)中'container'尚未加载，返回null，触发Cannot read property 'appendChild' of null - 验证方法：插入前加
if (!parent) throw new Error('parent not found')
appendChild 的参数必须是 Node 实例
appendChild() 接收且仅接收单个 Node 类型值（如 Element、Text、DocumentFragment），传字符串、数组或 undefined 会直接抛 TypeError。
- 错误写法：
parent.appendChild('hello')、parent.appendChild([el1, el2]) - 正确处理文本：
parent.appendChild(document.createTextNode('hello')) - 批量插入多个元素时，不要循环调用
appendChild()，优先用DocumentFragment：
const frag = document.createDocumentFragment();
data.forEach(item => {
const li = document.createElement('li');
li.textContent = item.name;
frag.appendChild(li);
});
parent.appendChild(frag); // 一次重排，性能更好
事件绑定必须在插入后或用事件委托
动态创建的元素，如果在 appendChild() 前绑定事件，监听器不会生效——因为此时节点还没进入 DOM，部分浏览器甚至不触发冒泡路径。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：插入后再绑定，例如
parent.appendChild(btn); btn.addEventListener('click', handler) - 避免闭包陷阱：循环中用
var i绑定事件，最后所有监听器都捕获同一个i值；改用let i或把数据存到btn.dataset里读取 - 更健壮的替代方案：对父容器用事件委托，监听
parent.addEventListener('click', e => { if (e.target.matches('.item-btn')) {...} })
插入时机必须等 DOM 加载完成
脚本若在 <head> 中执行，而目标容器在 <body> 底部，document.getElementById() 必然返回 null。
- 可靠方案：把操作包裹在
document.addEventListener('DOMContentLoaded', ...)中 - 简单替代：将
<script>放在</body>前，确保 DOM 已解析完毕 - 不推荐：
window.onload——它等所有资源（图片、CSS）加载完，延迟更高 - 注意：
document.body.appendChild(el)是合法的，但document.appendChild(el)会报错，因为document不是Node的合法父级
最容易被忽略的是插入顺序与节点所有权：一个节点只能有一个父节点，重复 appendChild() 会自动从原位置移除再插入新位置——这不是 bug，是 DOM 规范行为，但可能意外清空已有事件或状态。
