JavaScript基础教程（七）输出之innerHTML：天使还是魔鬼？深度解析JavaScript中的innerHTML

innerHTML：强大的DOM操作利器

innerHTML属性允许我们直接通过HTML字符串来设置或获取元素的内容，这种操作简单直观：

// 基本用法
const container = document.getElementById('app');
container.innerHTML = '<h1>欢迎阅读</h1><p>这是通过innerHTML添加的内容</p>';

// 获取内容
console.log(container.innerHTML); // 输出当前HTML内容

隐藏的安全隐患：XSS攻击

innerHTML的最大风险是可能执行恶意脚本：

// 危险示例：用户输入直接插入
const userInput = '<img src=x onerror="alert(`你的数据被窃取了!`)">';
container.innerHTML = userInput; // 立即执行恶意代码

最佳实践方案

1. 内容清理：使用DOMPurify等库过滤用户输入

// 安全示例
const cleanInput = DOMPurify.sanitize(userInput);
container.innerHTML = cleanInput;

1. 文本内容优先：非必要情况使用textContent

// 安全文本插入
container.textContent = userInput; // 只会显示文本，不会解析HTML

1. 文档片段优化：大批量操作时使用DocumentFragment

// 高性能批量插入
const fragment = document.createDocumentFragment();
for(let i = 0; i < 100; i++) {
  const item = document.createElement('div');
  item.textContent = `项目 ${i}`;
  fragment.appendChild(item);
}
container.appendChild(fragment);

结语

innerHTML是一把双刃剑，提供了便捷的DOM操作方式，但也带来了安全风险。在简单场景下可以谨慎使用，对于用户输入内容必须经过严格过滤。现代开发中，更推荐使用textContent、createElement等更安全可控的API来实现页面内容更新。