用 createElement 创建元素需设置内容、属性并手动插入；优先用 classList 和 dataset 操作类与 data 属性；批量渲染用 DocumentFragment 提升性能；动态事件用事件代理避免重复绑定。
用 document.createElement 创建元素，但别忘了设置内容和属性
直接调用 document.createElement('div') 只会生成一个空的、未挂载的节点。它没有文本、没有类名、也不在页面上——相当于写好了零件，还没组装。
- 文本内容要用
textContent（推荐，防 XSS）或innerHTML（需确保内容可信）设置 - 添加 class 要用
element.classList.add('my-class')，而不是直接改className（会覆盖已有类） - 设置 ID、data 属性等，统一用
element.setAttribute('data-id', '123') - 创建后必须手动插入，比如
parent.appendChild(newElement)，否则用户完全看不见
const btn = document.createElement('button');
btn.textContent = '点击我';
btn.classList.add('primary', 'large');
btn.setAttribute('data-action', 'submit');
document.body.appendChild(btn);
修改已有元素，优先用 classList 和 dataset
直接操作 className 或拼接 innerHTML 容易出错：前者清空所有类，后者触发重排+XSS 风险；而 dataset 自动处理 data- 前缀转换，比反复 getAttribute 更安全简洁。
- 增删类：
el.classList.toggle('active')、el.classList.remove('old') - 读写 data 属性：
el.dataset.userId = '456'→ 对应 HTML 中data-user-id="456" - 改文本内容，始终优先
el.textContent = '新标题'，除非你明确需要解析 HTML - 避免用
el.innerHTML += '...'——这会销毁子节点并重新解析，事件监听器全丢
动态内容批量渲染，绕不开 DocumentFragment
一次插入 100 个 li？如果每个都 appendChild，浏览器会触发 100 次重排，卡顿明显。用 DocumentFragment 先离屏组装，再一次性挂载，性能差距肉眼可见。
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
下载
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
-
const frag = document.createDocumentFragment()创建轻量容器 - 所有新元素先
frag.appendChild(item)，不触发布局 - 最后只执行一次
listEl.appendChild(frag) - 现代框架底层也这么干，不是“过度优化”，是基础实践
const frag = document.createDocumentFragment();
for (const item of items) {
const li = document.createElement('li');
li.textContent = item.name;
frag.appendChild(li);
}
document.getElementById('list').appendChild(frag);
事件代理解决动态元素绑定失效问题
用 appendChild 加进来的按钮，如果之前用 querySelectorAll('button').forEach(...) 绑过事件，新按钮根本没监听器——因为它们创建时不在 DOM 里。
立即学习“Java免费学习笔记（深入）”；
- 不要给每个动态元素单独绑定，改用父容器的事件代理
- 监听父级（如
ul），检查event.target.matches('button.action') - 这样新增的按钮自动响应，无需重复绑定
- 注意：代理目标要选稳定存在的父节点，别选可能被整个替换的容器
document.getElementById('container').addEventListener('click', (e) => {
if (e.target.matches('button.delete')) {
e.target.closest('li').remove();
}
});
真实项目里，动态内容往往混着状态更新、异步加载、错误回退——但核心就三件事：正确创建、安全插入、智能响应。漏掉 DocumentFragment 或硬写 innerHTML +=，后面性能和维护成本会突然跳涨。 
