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 = '<p>这是新段落</p><button>点击我</button>';

安全提醒：避免 XSS 风险

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

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

立即学习“Java免费学习笔记（深入）”；

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

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

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

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

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

box.insertAdjacentHTML('beforeend', '<span>插在最后</span>');

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

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

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