innerHTML属性用于获取或设置HTML元素的内部HTML内容，通过直接赋值新HTML字符串，可动态添加元素或文本，如：element.innerHTML += ”，注意这会覆盖原有内容，需用+=追加。
innerHTML 是 JavaScript 中操作 DOM 元素内容的核心属性，它允许开发者动态添加、修改或替换 HTML 内容，以下是详细使用指南：
innerHTML 基础用法
通过 innerHTML 可直接插入 HTML 字符串到指定元素中：
// 获取目标元素
const container = document.getElementById("myDiv");
覆盖原有内容）
container.innerHTML = "<p>新段落内容</p>";
保留原有内容）
container.innerHTML += "<button>点击</button>";
的三种场景
覆盖写入
直接赋值会替换元素内所有原有内容：
document.body.innerHTML = "<h1>页面标题</h1>";
增量追加
使用 运算符追加内容（效率较低，适合简单场景）：
const list = document.getElementById("list");
list.innerHTML += "<li>新增项目</li>"; // 每次追加触发重绘
高效批量添加
先拼接完整 HTML 字符串，再一次性写入（推荐）：
const items = ["苹果", "香蕉", "橙子"];
let htmlString = "";
items.forEach(item => {
htmlString += `<li>${item}</li>`; // 内存中拼接
});
list.innerHTML = htmlString; // 单次写入减少重绘
安全风险与防御（XSS 攻击）
innerHTML 会解析字符串中的 HTML 标签，可能执行恶意脚本：
// 危险示例：用户输入直接插入 userInput = "<img src='x' onerror='stealData()'>"; container.innerHTML = userInput; // 触发恶意代码
防御方案：
- 转义特殊字符：将
<,>,&, 等转换为实体编码（如<） - 使用专用库：
// 使用 DOMPurify 库过滤 const cleanHTML = DOMPurify.sanitize(userInput); container.innerHTML = cleanHTML;
- 避免直接插入用户输入,优先使用
textContent（见下文）。
innerHTML 与 textContent 的区别
| 特性 | innerHTML | textContent |
|---|---|---|
| 处理方式 | 解析 HTML 标签 | 视为纯文本 |
| 显示效果 | 标签会被渲染 | 标签以文本形式显示（如 <p>） |
| 安全性 | 有 XSS 风险 | 自动转义，安全 |
| 性能 | 解析 HTML 消耗资源 | 更高效率 |
使用建议：
- 仅需插入文本时 → 用
textContent - 需插入带样式的复杂结构（如表格、按钮）→ 用
innerHTML
最佳实践
- 批量操作：减少
innerHTML赋值次数，避免重复渲染。 - 模板字符串：利用反引号
`创建多行 HTML：container.innerHTML = ` <div class="card"> <h3>${title}</h3> <p>${content}</p> </div> `; - 复杂场景用 DOM API：创建
createElement和appendChild更可控。 - 服务端渲染：对不可信内容，优先在服务端渲染再插入。
兼容性说明
- 所有现代浏览器（Chrome/Firefox/Safari/Edge）均支持。
- 无法插入
<script>标签（自动忽略），需通过其他方式执行脚本。
引用说明参考 MDN Web Docs innerHTML 的权威文档，并遵循 OWASP 提供的 XSS 防御指南，安全示例使用 DOMPurify 开源库。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/30141.html
