createElement 适合动态构建交互组件，安全且可控，如创建带事件的节点；innerHTML 适用于快速插入静态结构，但存在性能与安全风险，需谨慎使用。
在操作网页结构时，创建和插入元素是常见需求。JavaScript 提供了多种方式实现，其中 createElement 和 innerHTML 是最常用的两种方法。它们各有特点，适用于不同场景。
createElement：精确控制 DOM 节点
使用 document.createElement() 可以创建一个新的 DOM 元素节点，然后通过属性设置、事件绑定、追加子节点等方式逐步构建。
优点：- 创建的元素可直接绑定事件监听器，逻辑清晰安全
- 不会触发页面重解析（reparse），性能更可控
- 避免执行内联脚本，防止 XSS 攻击，安全性高
- 便于动态操作，适合复杂交互组件的构建
- 代码量较多，需要多次调用 appendChild、setAttribute 等方法
- 批量插入多个元素时不够简洁
示例：
const div = document.createElement('div');
div.className = 'alert';
div.textContent = '这是一条提示信息';
div.addEventListener('click', () => alert('被点击了'));
document.body.appendChild(div);
innerHTML：快速插入 HTML 字符串
element.innerHTML 允许直接设置元素内部的 HTML 内容，语法简单，适合快速渲染静态结构。
立即学习“Java免费学习笔记（深入）”；
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
- 写法简洁，一行代码即可插入大量结构
- 适合渲染已知的静态内容或模板字符串
- 在一次性替换内容时效率较高
- 会销毁原有 DOM 节点，导致绑定的事件丢失
- 浏览器需重新解析整个内部结构，频繁使用影响性能
- 可能引入 XSS 漏洞，尤其当内容来自用户输入时
- 无法直接绑定事件，需额外查询节点处理
示例：
document.body.innerHTML += '<div class="alert" onclick="alert(1)">提示信息</div>';
如何选择？根据场景决定
如果需要动态构建交互性强的组件，比如按钮、表单控件或带事件的模块，推荐使用 createElement。它结构清晰，安全可控，更适合维护。
如果只是展示一段静态 HTML，例如从可信来源加载的说明文本或配置好的模板，innerHTML 更快捷。但务必确保内容可信，避免拼接用户输入。
现代开发中，也可以考虑结合 textContent 处理纯文本，或使用 insertAdjacentHTML 在不破坏现有结构的前提下插入 HTML，作为 innerHTML 的补充方案。
基本上就这些，关键在于理解每种方法的行为差异，按需选择更合适的工具。
