JavaScript DOM 创建：createElement 与 innerHTML 的优劣

createElement 适合动态构建交互组件，安全且可控，如创建带事件的节点；innerHTML 适用于快速插入静态结构，但存在性能与安全风险，需谨慎使用。

在操作网页结构时，创建和插入元素是常见需求。JavaScript 提供了多种方式实现，其中 createElement 和 innerHTML 是最常用的两种方法。它们各有特点，适用于不同场景。

createElement：精确控制 DOM 节点

使用 document.createElement() 可以创建一个新的 DOM 元素节点，然后通过属性设置、事件绑定、追加子节点等方式逐步构建。

• 创建的元素可直接绑定事件监听器，逻辑清晰安全
• 不会触发页面重解析（reparse），性能更可控
• 避免执行内联脚本，防止 XSS 攻击，安全性高
• 便于动态操作，适合复杂交互组件的构建

• 代码量较多，需要多次调用 appendChild、setAttribute 等方法
• 批量插入多个元素时不够简洁

示例：

YOYA优雅

多模态AI内容创作平台

106

查看详情

const div = document.createElement('div');
div.className = 'alert';
div.textContent = '这是一条提示信息';
div.addEventListener('click', () => alert('被点击了'));
document.body.appendChild(div);

innerHTML：快速插入 HTML 字符串

element.innerHTML 允许直接设置元素内部的 HTML 内容，语法简单，适合快速渲染静态结构。

立即学习“Java免费学习笔记（深入）”；

• 写法简洁，一行代码即可插入大量结构
• 适合渲染已知的静态内容或模板字符串
• 在一次性替换内容时效率较高

• 会销毁原有 DOM 节点，导致绑定的事件丢失
• 浏览器需重新解析整个内部结构，频繁使用影响性能
• 可能引入 XSS 漏洞，尤其当内容来自用户输入时
• 无法直接绑定事件，需额外查询节点处理

示例：

document.body.innerHTML += '<div class="alert" onclick="alert(1)">提示信息</div>';

如何选择？根据场景决定

如果需要动态构建交互性强的组件，比如按钮、表单控件或带事件的模块，推荐使用 createElement。它结构清晰，安全可控，更适合维护。

如果只是展示一段静态 HTML，例如从可信来源加载的说明文本或配置好的模板，innerHTML 更快捷。但务必确保内容可信，避免拼接用户输入。

现代开发中，也可以考虑结合 textContent 处理纯文本，或使用 insertAdjacentHTML 在不破坏现有结构的前提下插入 HTML，作为 innerHTML 的补充方案。

基本上就这些，关键在于理解每种方法的行为差异，按需选择更合适的工具。

以上就是JavaScript DOM 创建：createElement 与 innerHTML 的优劣的详细内容，更多请关注php中文网其它相关文章！