【innerHTML是什么】总结：
`innerHTML` 是 JavaScript 中用于获取或设置 HTML 元素内容的属性。它允许开发者动态地读取或修改页面中某个元素内部的所有 HTML 内容。使用 `innerHTML` 可以快速更新页面内容，但也需要注意其潜在的安全风险和性能问题。
innerHTML 简介
| 项目 | 内容 |
| 定义 | `innerHTML` 是一个属性，用于获取或设置 HTML 元素内部的 HTML 内容。 |
| 类型 | 属性（property） |
| 用途 | 动态更新网页内容、创建或删除 HTML 元素 |
| 语法 | `element.innerHTML = "新内容";` 或 `var content = element.innerHTML;` |
| 优点 | 使用简单、功能强大 |
| 缺点 | 存在 XSS 风险、可能影响性能 |
innerHTML 的使用示例
```html
原始内容
<script>
// 获取元素
var demo = document.getElementById("demo");
// 设置新内容
demo.innerHTML = "这是新的内容";
// 获取当前内容
console.log(demo.innerHTML); // 输出: 这是新的内容
</script>
```
注意事项
1. 安全性问题：
如果 `innerHTML` 被用来插入用户输入的内容，可能会导致 XSS（跨站脚本攻击）。应尽量避免直接将未经过滤的用户输入写入 `innerHTML`。
2. 性能问题：
每次修改 `innerHTML` 都会触发浏览器的重排和重绘，频繁使用可能会影响页面性能。
3. 替代方案：
对于更安全和高效的 DOM 操作，可以考虑使用 `textContent` 或 `createElement`、`appendChild` 等方法。
对比：innerHTML vs textContent
| 特性 | innerHTML | textContent |
| 是否解析 HTML | ✅ 是 | ❌ 否 |
| 是否支持 HTML 标签 | ✅ 是 | ❌ 否 |
| 安全性 | 较低 | 较高 |
| 性能 | 一般 | 更好 |
| 使用场景 | 需要动态渲染 HTML 内容 | 仅需显示纯文本内容 |
总结：
`innerHTML` 是一个强大但需要谨慎使用的属性。合理使用它可以提升用户体验，但若处理不当，也可能带来安全隐患。在实际开发中，建议根据需求选择合适的 DOM 操作方式。
