document.createElement()是最基本可控的HTML元素创建方式，返回未挂载节点，需手动设置属性、内容、事件后用appendChild等挂载；常见错误包括未挂载、误传字符串；innerHTML和insertAdjacentHTML适合批量插入但需防XSS；textContent用于安全显示纯文本；事件应优先委托给父容器。
用 document.createElement() 创建元素最直接
这是创建 HTML 元素最基本、最可控的方式，适用于所有现代浏览器。它返回一个未挂载的节点，后续可自由设置属性、内容、事件，再插入 DOM。
常见错误是创建后没加进文档树，导致页面无变化：
- 只调用
document.createElement('div')不会自动显示 - 忘记用
appendChild()、insertBefore()或replaceChild()挂载到真实节点上 - 误把字符串当节点传入（如
parent.appendChild('')），会报错或转为文本
示例：创建带 class 和文本的按钮
const btn = document.createElement('button');
btn.className = 'primary-btn';
btn.textContent = '提交';
document.body.appendChild(btn);
innerHTML 和 insertAdjacentHTML() 适合批量插入 HTML 字符串
innerHTML 简单但有风险：会清空原有子节点，且若拼接用户输入可能引发 XSS。仅推荐用于完全可控的静态结构。
insertAdjacentHTML() 更安全灵活，支持四个插入位置：'beforebegin'、'afterbegin'、'beforeend'、'afterend'，且不破坏已有节点。
- 用
el.insertAdjacentHTML('beforeend', 'new')相当于el.appendChild(...)，但支持 HTML 字符串 - 避免在循环中反复设置
innerHTML，性能差（每次重解析整个子树） - 如果 HTML 字符串含事件绑定，需手动添加监听器——它只生成节点，不执行脚本
设置属性和内容时，优先用 textContent 而非 innerHTML 插入纯文本
当你只是想显示一段用户数据（比如用户名、错误提示），textContent 是首选：
- 自动转义 HTML 特殊字符，防止 XSS（
textContent = ''会原样显示为文本） - 比
innerText更快、更可靠（innerText受 CSS 样式影响，且在某些浏览器中行为不一致） - 设置富文本？那就必须用
innerHTML，但务必先过滤或使用DOMPurify等库清洗
别混用：el.textContent = 'hello' 不会加粗，只会显示字面量。
动态元素绑定事件要用事件委托，别在循环里重复 addEventListener
如果用 JS 批量创建了 50 个按钮，每个都写 btn.addEventListener('click', handler)，不仅内存占用高，移除时还容易遗漏。
- 正确做法：给父容器绑定一次事件，用
event.target判断来源（例如container.addEventListener('click', e => { if (e.target.matches(）
'.item-btn')) {...} })
- 注意：委托依赖事件冒泡，自定义事件或
stopPropagation()会中断它 - 如果元素是异步加载或频繁增删，委托比逐个绑定更稳定
复杂交互逻辑（如拖拽、焦点管理）仍需在元素创建后单独初始化，不能全靠委托覆盖。
真正麻烦的是混合场景：既要插入含事件的 HTML 片段，又要保证样式隔离、事件不冲突、资源可回收。这时候得权衡是用原生 API 拼装，还是引入轻量模板函数，甚至考虑customElements.define() 封装。细节一多，漏掉 removeEventListener 或没清理定时器，就容易内存泄漏。
