在JavaScript前端开发中，动态创建DOM元素是构建交互页面的核心操作之一，createElement和innerHTML是实现该需求的两种常用方案，两者在适用场景、性能表现和潜在风险上存在明显差异。
两种方式的实现原理
createElement 的工作方式
createElement是DOM API提供的原生方法，用于创建指定标签名的元素节点，创建后需要通过appendChild等方法插入到DOM树中，也可以通过setAttribute、textContent等API逐步设置元素属性和内容。
示例代码如下：
// 使用createElement创建div元素并添加内容
const container = document.getElementById('container');
// 创建div元素
const newDiv = document.createElement('div');
// 设置类名
newDiv.className = 'new-item';
// 设置文本内容
newDiv.textContent = '这是通过createElement创建的元素';
// 插入到容器中
container.appendChild(newDiv);
innerHTML 的工作方式
innerHTML是元素的一个属性，用于获取或设置元素内部的HTML内容。当给innerHTML赋值包含HTML结构的字符串时，浏览器会解析该字符串并生成对应的DOM节点，替换元素原有的所有子节点。
示例代码如下：
// 使用innerHTML创建div元素并添加内容
const container = document.getElementById('container');
// 直接赋值HTML字符串，浏览器会解析生成对应DOM
container.innerHTML = '<div class="new-item">这是通过innerHTML创建的元素</div>';
性能表现对比
两者的性能差异主要体现在不同的使用场景下：
- 单次创建少量元素时，两者性能差距极小，几乎可以忽略不计，开发者可以根据习惯选择。
- 批量创建大量元素时，createElement配合文档片段（DocumentFragment）的性能优于innerHTML。因为innerHTML每次赋值都会触发浏览器的HTML解析和DOM重构，而createElement是原生DOM操作，配合文档片段可以减少回流重绘次数。
- 如果是在已有元素基础上追加内容，innerHTML的
+=操作会先销毁原有所有子节点再重新构建，性能远低于createElement的appendChild操作。
批量创建元素的性能对比示例：
const container = document.getElementById('container');
const fragment = document.createDocumentFragment();
// 使用createElement批量创建1000个li
for (let i = 0; i < 1000; i++) {
const li = document.createElement('li');
li.textContent = `项目${i}`;
fragment.appendChild(li);
}
container.appendChild(fragment);
// 使用innerHTML批量创建1000个li
let htmlStr = '';
for (let i = 0; i < 1000; i++) {
htmlStr += `<li>项目${i}</li>`;
}
container.innerHTML = htmlStr;
安全性差异
innerHTML存在明显的安全风险，如果赋值的字符串包含用户输入的内容，且未经过转义处理，很容易引发XSS攻击。而createElement创建的元素内容通过textContent设置时，会自动转义特殊字符，安全性更高。
安全风险示例如下：
const userInput = '<img src="x" onerror="alert('恶意代码执行')">';
const container = document.getElementById('container');
// 直接使用innerHTML存在XSS风险
container.innerHTML = userInput; // 会执行onerror中的恶意代码
// 使用createElement更安全
const img = document.createElement('img');
img.src = 'x';
// 即使设置这样的内容，也不会执行恶意脚本
img.onerror = function() { console.log('加载失败'); };
container.appendChild(img);
代码可维护性对比
createElement的操作步骤更清晰，每个属性和节点都可以单独控制，适合结构复杂、需要动态修改属性的场景，代码可读性更好。innerHTML适合快速生成结构简单的静态HTML片段，但是当HTML结构复杂时，拼接字符串的可读性差，后期修改容易出错。
适用场景建议
- 优先选择createElement的场景：需要创建大量元素、涉及用户输入内容、需要动态修改元素属性、对安全性要求高的场景。
- 可以选择innerHTML的场景：快速生成简单静态HTML片段、单次创建少量元素、不需要处理用户输入内容的场景。
总结来说，两种方式没有绝对的好坏之分，开发者需要根据具体的业务场景、性能需求和安全性要求来选择合适的方案，才能写出更合理的前端代码。
createElementinnerHTMLDOM操作JavaScript修改时间：2026-06-26 16:27:16