innerHTML用于获取或设置元素内部HTML结构，会解析标签并替换全部子节点，但存在XSS风险且会销毁事件监听器；安全场景推荐textContent，局部插入优选insertAdjacentHTML。

innerHTML 是 JavaScript 中最常用、最直接修改元素内容的方式，它能将字符串解析为 HTML 并插入到指定节点内部。

基本用法：赋值替换全部内容

通过 element.innerHTML = htmlString 可以完全替换目标元素的子节点（包括文本和标签）：

• 原内容会被清空，新 HTML 字符串被解析并渲染
• 支持嵌套标签，比如 加粗
  • 列表项
• 注意：会销毁原有绑定的事件监听器（因为节点被重建）

示例：

const box = document.getElementById('box');
box.innerHTML = '

这是新段落

点击我';

安全提醒：避免 XSS 风险

如果插入的内容来自用户输入或外部接口，直接拼接 HTML 极易引发跨站脚本攻击（XSS）：

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

• 不要这样写：box.innerHTML = '
  ' + userInput + '
  '
• 推荐做法：用 textContent 显示纯文本；如需渲染 HTML，先对内容做转义（例如用 DOMPurify.sanitize() 过滤）
• 简单转义可手动实现：将 、>、& 替换为对应 HTML 实体

进阶技巧：局部更新与追加内容

想在不覆盖已有内容的前提下添加新内容，可以结合已有值操作：

• 追加到末尾：box.innerHTML += '新增内容'
• 插入到开头：box.innerHTML = '前置内容' + box.innerHTML
• 但要注意：这种写法会重新解析整个 innerHTML，性能较差，频繁操作建议改用 appendChild 或 insertAdjacentHTML

insertAdjacentHTML 更精准（支持 'beforebegin'、'afterbegin'、'beforeend'、'afterend' 四个位置），且不破坏现有节点：

box.insertAdjacentHTML('beforeend', '插在最后');

替代方案对比：什么时候不该用 innerHTML

以下情况建议优先考虑其他方法：

• 只改文本？用 textContent 或 innerText 更快更安全
• 只改某个属性？直接操作 element.src、element.className 等
• 动态增删多个同类型元素？用 DocumentFragment 批量构建再插入，减少重排重绘
• 需要保留事件监听或表单状态？避免 innerHTML 覆盖，改用 appendChild 或 replaceChild

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南