改盒子里的字，有两把不同的刷子：innerText 是"照抄文字"——你写啥它就原封不动显示啥；innerHTML 是"懂排版的"——你给它标签，它真给你排出版式。但正因为它太听话，别人输入的内容千万别丢给它，否则会被塞进捣乱的代码（这叫 XSS 攻击）。
把它想成一台复印机：你给它带尖括号的东西，它也只会原原本本印成一行字，绝不会把 当真。
let box = document.getElementById('targetBox'); // 抓到目标盒子
// 给它一串带标签的字
box.innerText = '<b>加粗</b> 你好'; // 照抄，尖括号只当普通字
// 屏幕上就是原样显示：<b>加粗</b> 你好（字不会变粗）
把它想成一个排版员：你给它标签，它按标签排版——真的变粗、<h1>真的变大标题。
let box = document.getElementById('targetBox'); // 还是那个目标盒子
// 给同样的一串字
box.innerHTML = '<b>加粗</b> 你好'; // 它真认标签，把 <b> 当真排版
// 屏幕上"加粗"两个字真的变粗了！
如果你用 innerHTML 写一次新内容，盒子里原来的字就没了。因为它是"整块替换"不是"在后面追加"；想保留旧内容，得自己拼字符串或用 appendChild。
想象有人故意输入这么一串"字"：一张故意加载失败的图片，图片一失败就自动跑一段偷偷的代码。如果你用 innerHTML，浏览器真会照办；用 innerText，它只会被当成一行普通文字，啥也跑不起来。
// 别信的"坏内容"长这样：一张 src 写错的图，失败就弹窗
<img src=x onerror="alert('坏代码跑了')">
如果你把别人/后端给的内容直接塞进 innerHTML，就可能让坏人偷偷在你页面跑代码（XSS）；因为 innerHTML 会把标签当真去执行，而 innerText 只会当成普通字。所以：展示别人给的内容一律用 innerText，只有自己写死、确定安全的标签才用 innerHTML。
① 用在哪：评论区/聊天列表展示用户内容；自己写死结构时动态插入标签。
② 常见坑：把用户输入用 innerHTML 渲染导致 XSS；或忘了 innerHTML 是整块覆盖。
③ 怎么解决：展示别人内容一律 innerText；自己造结构才用 innerHTML，注意它会覆盖原内容。