innerHTML和createElement哪个快？
做网页开发时，经常要动态添加内容。比如你写了个待办事项列表，每点“添加”按钮，就得往页面里塞一条新任务。这时候就会遇到选择：用 innerHTML 还是 createElement？很多人凭感觉选，其实它们在速度和使用场景上差别挺大。
直接拼字符串：innerHTML 的做法
innerHTML 走的是“暴力流”。你想加个 div，直接把 HTML 写成字符串，塞进某个容器里：
document.getElementById('container').innerHTML += '<div class="item">新项目</div>';写起来爽，代码短，像在写模板。但问题也在这儿——每次设置 innerHTML，浏览器都要重新解析整个字符串，重建这部分 DOM 结构。如果原来就有内容，+= 操作还会先把旧内容读出来再拼接，等于反复折腾。
正经建元素：createElement 的流程
createElement 是“正规军”。它一步步创建节点，再挂上去：
const container = document.getElementById('container');
const newItem = document.createElement('div');
newItem.className = 'item';
newItem.textContent = '新项目';
container.appendChild(newItem);代码多几行，但每一步都明确。浏览器知道你在干啥，不用猜，也不用重解析已有内容。尤其批量插入时，配合 DocumentFragment，性能更稳。
速度比拼：小量操作看不出，大量就见真章
单次添加一个元素，两者差距几乎感知不到。但你要一次性插 1000 个 item，差别就出来了。测试表明，createElement 配合 Fragment 通常比 innerHTML 快 2 到 3 倍，尤其在低端设备或复杂结构下更明显。
而且 innerHTML 容易出安全问题。比如用户输入了 <script>alert(1)</script>，你用 innerHTML 直接塞进去，页面就执行脚本了。createElement 天然避开了这种风险，文本内容用 textContent 设置，不会被当成 HTML 解析。
实际开发怎么选？
如果你只是改一小块静态内容，比如更新个时间、提示语，用 innerHTML 完全没问题，省事。
但涉及用户数据、频繁操作、或者要插大量节点，老老实实用 createElement。虽然代码多几行，但稳定、安全、性能好。就像修水管，临时堵漏用胶带，长久之计还得焊管子。
现代框架如 React、Vue 其实底层也是 createElement 的思路，只是封装得更高级。了解这层区别，有助于理解为什么“直接操作 DOM”常被劝退。