innerhtml用于获取或设置元素内部html结构，会解析标签并替换全部子节点，但存在xss风险且会销毁事件监听器；安全场景推荐textcontent，局部插入优选insertadjacenthtml。
innerHTML 是 JavaScript 中最常用、最直接修改元素内容的方式，它能将字符串解析为 HTML 并插入到指定节点内部。
基本用法：赋值替换全部内容
通过 element.innerHTML = htmlString 可以完全替换目标元素的子节点（包括文本和标签）：
- 原内容会被清空，新 HTML 字符串被解析并渲染
- 支持嵌套标签，比如
<strong>加粗</strong><ul><li>列表项</li></ul> - 注意：会销毁原有绑定的事件监听器（因为节点被重建）
示例：
const box = document.getElementById('box');box.innerHTML = '
这是新段落
安全提醒：避免 XSS 风险
如果插入的内容来自用户输入或外部接口，直接拼接 HTML 极易引发跨站脚本攻击（XSS）：
- 不要这样写：
box.innerHTML = '<div>' + userInput + '</div>' - 推荐做法：用
textContent显示纯文本；如需渲染 HTML，先对内容做转义（例如用DOMPurify.sanitize()过滤） - 简单转义可手动实现：将
、<code>>、&替换为对应 HTML 实体
进阶技巧：局部更新与追加内容
想在不覆盖已有内容的前提下添加新内容，可以结合已有值操作：
- 追加到末尾：
box.innerHTML += '<span>新增内容</span>' - 插入到开头：
box.innerHTML = '<em>前置内容</em>' + box.innerHTML - 但要注意：这种写法会重新解析整个 innerHTML，性能较差，频繁操作建议改用
appendChild或insertAdjacentHTML
insertAdjacentHTML 更精准（支持 'beforebegin'、'afterbegin'、'beforeend'、'afterend' 四个位置），且不破坏现有节点：
替代方案对比：什么时候不该用 innerHTML
以下情况建议优先考虑其他方法：
- 只改文本？用
textContent或innerText更快更安全 - 只改某个属性？直接操作
element.src、element.className等 - 动态增删多个同类型元素？用
DocumentFragment批量构建再插入，减少重排重绘 - 需要保留事件监听或表单状态？避免 innerHTML 覆盖，改用
appendChild或replaceChild
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
