会，innerhtml直接赋值会无条件执行script标签和事件属性；不可信内容必须过滤，优先用textcontent显示纯文本，或用dompurify等库安全插入html。
innerHTML 直接赋值会执行脚本吗
会，而且是无条件执行。只要字符串里包含 <script></script> 标签或事件属性（比如 onclick），浏览器就会解析并运行——哪怕你只是想显示一段 HTML 源码。
常见错误现象：
用户输入 <img src="x" onerror="alert(1)">，结果页面弹窗；后台返回的富文本里带了未过滤的 <script src="malicious.js"></script>，整个页面被劫持。
- 永远别把不可信内容直接塞进
innerHTML，包括用户输入、API 返回、URL 参数拼接的片段 - 如果必须渲染富文本，优先用
textContent显示原始内容，或用专门的库（如DOMPurify）做白名单过滤 -
innerHTML = '<div>Hello</div>'这种静态、完全可控的字符串可以，但一旦涉及变量拼接，风险立刻上升
用 textContent 替代 innerHTML 的适用场景
当你只需要更新文字内容，不关心标签结构时，textContent 是最安全、也最快的替代方案。
使用场景：
表单校验提示（errorMsg.textContent = '邮箱格式错误'）、动态标题（document.querySelector('h1').textContent = title）、日志输出区域。
-
textContent会自动转义所有 HTML 字符，变成 <code><，彻底杜绝 XSS - 性能上比
innerHTML略快，因为它不触发 HTML 解析和 DOM 构建 - 注意：它会清空子节点的所有结构，包括注释、空格、子元素——如果你只想改其中一段文字，得定位到具体文本节点，而不是父容器
安全插入 HTML 的三个可行路径
真需要插入带标签的内容，不能靠“手写正则过滤”，得用有验证逻辑的方式。
- 用
DOMPurify.sanitize()处理后再给innerHTML：支持自定义白名单（比如只允许<p></p>、<strong></strong>、class属性），能拦截javascript:协议和内联事件 - 服务端预处理：在 API 返回前就做过滤（如用
sanitize-htmlNode 库），前端只负责渲染，责任分离更清晰 - 用
template+cloneNode()手动构造：适合固定模板，比如评论项，把结构写死在<template></template>中，用content.querySelector('.user-name').textContent = name填值，完全避开字符串拼接
innerHTML 在不同浏览器中的兼容性差异
基础功能全支持，但细节行为不一致，尤其在处理不完整标签或特殊字符时。
典型问题：
Chrome 对 innerHTML = '<tr>
<td>1</td>' 会自动补全为完整表格结构；Firefox 可能直接丢弃无效片段；Safari 在某些版本中对 <code><colgroup></colgroup> 解析异常。
- 不要依赖浏览器自动修复 HTML——确保你给的字符串是语法完整的，比如
<div><p>text</p></div>，而非<p>text</p> - 避免在
table、select、map等受限容器上直接设innerHTML，应操作其特定子元素（如tbody.innerHTML） - IE8 及更早版本不支持对某些元素（如
col、legend）设置innerHTML，现在基本可忽略，但若需支持旧系统，得加降级逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
