document.createElement是创建DOM元素的基础方法，但需手动设置属性和内容；DocumentFragment可离线组装节点再一次性插入以提升性能；template+cloneNode适合批量生成结构固定的元素；append()比appendChild()更灵活高效。
动态创建 DOM 元素时，document.createElement 是基础手段，但频繁操作会引发重排重绘；而 DocumentFragment 能把多个节点先“离线”组装好，再一次性插入，显著提升性能。
createElement 创建单个元素要配对设置属性
直接用 createElement 只生成空元素，必须手动设置 textContent、innerHTML、className、id 等，否则页面看不到内容或样式失效。
- 推荐用
element.textContent设置文本（防 XSS），避免直接拼接 HTML 字符串 - 设置类名优先用
element.className = 'btn primary'或element.classList.add('btn', 'primary') - 绑定事件别写
onclick="..."，改用element.addEventListener('click', handler)
Fragment 解决多次 appendChild 导致的性能问题
循环中反复调用 parent.appendChild(child)，每次都会触发浏览器布局计算。Fragment 相当于一个轻量“文档容器”，不挂载到真实 DOM，所有操作都在内存中完成。
- 创建：
const frag = document.createDocumentFragment() - 往 frag 里追加元素（支持多次
appendChild或append） - 最后只执行一次
parent.appendChild(frag)，DOM 更新仅发生一次
现代写法可结合 template + cloneNode 避免重复解析
如果结构固定、需批量生成相似元素（如列表项），用 <template></template> 预定义结构更清晰高效：
立即学习“Java免费学习笔记（深入）”；
- 在 HTML 中写：
<template id="itemTpl"><li class="item"><span></span></li></template> - JS 中获取并克隆：
const tpl = document.getElementById('itemTpl'); const item = tpl.content.cloneNode(true); - 再修改内容、添加事件，最后塞进 Fragment 或直接插入
小技巧：用 append 替代 appendChild 支持多参数和文本节点
element.append() 比 appendChild() 更灵活：能同时传入多个节点、字符串、甚至 null（自动忽略），且不会把字符串转成文本节点再插入——更接近直觉。
- 旧写法：
parent.appendChild(el1); parent.appendChild(el2); - 新写法：
parent.append(el1, el2, '纯文本', document.createTextNode('也可')); - 注意：
append()不返回父元素，不能链式调用；appendChild()返回子元素
