html()读取首个元素的html内容并解析标签，text()提取所有匹配元素的纯文本且自动拼接；设置时html()渲染html而text()原样显示，不可信数据必须用text()防xss。
要在网页中动态修改一段文字，却不确定该用 jQuery 的 html() 还是 text() 方法——选错会导致标签被当成纯文本显示、或意外执行脚本、或内容拼接混乱。
读取内容时的行为差异
调用无参的 $("p").html() 仅返回第一个匹配 <p></p> 元素内部的完整 HTML 字符串，包括所有嵌套标签；比如 <p><em>Hello</em> world</p> 会得到 "<em>Hello</em> world"。
$("p").text() 则提取所有匹配 <p></p> 元素及其后代中的纯文本，自动剥离所有 HTML 标签，并将多个元素的文本内容无缝拼接——若页面中有两个 <p></p>，分别含 "A" 和 "B"，结果就是 "AB"。
这一步不可逆：一旦用 html() 读取后又用它写回未转义的内容，可能触发 XSS；而 text() 读取天然免疫此类风险，因为它根本不解析标签。
设置内容时的关键区别
方法一：用 .html("<strong>重点</strong>") 写入，浏览器会解析并渲染加粗效果，但【传入的字符串必须是合法 HTML 片段，否则可能导致 DOM 结构断裂】。
方法二：用 .text("<strong>重点</strong>") 写入，浏览器原样显示全部字符，包括尖括号和标签名，【不会解析任何 HTML，也无需担心 XSS 注入】。
方法三：传函数动态生成内容，两者都支持。例如：$("div").text((i, old) => `第${i}项：${old}`) —— 这里 i 是元素索引，old 是原始文本，适用于批量更新且需保留旧值的场景。
适用场景判断路径
第一步：确认目标元素是否需要保留/插入 HTML 样式或交互结构 → 是，选 html()；否，选 text()。
第二步：检查数据来源是否可信（如用户输入、API 返回）→ 若含不可信内容，强制用 text() 避免执行意外脚本。
第三步：观察 DOM 中是否存在多个同级匹配元素 → 若需统一设置全部元素内容，text(val) 会作用于所有匹配项；html(val) 同样作用于所有，但【读取时只取第一个，这点极易被忽略】。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
