复制整个元素（含自身标签）用 outerHTML，仅复制内部 HTML 用 innerHTML；textContent/innerText 仅得纯文本；writeText() 不丢样式但渲染依赖目标应用；需用户手势同步调用并处理 NotAllowedError；后端应提供未转义 HTML 供复制。
复制 HTML 内容时，innerHTML 和 outerHTML 到底该用哪个
直接复制 HTML 字符串，不是复制纯文本，关键看你要不要包含当前元素自身标签。用 innerHTML 只得子内容，用 outerHTML 才能连标签一起拷走。
常见错误是想复制一个 <div class="card"><p>Hello</p></div>，却只取了 innerHTML，结果粘贴出来只剩 <p>Hello</p>，丢了容器结构。
- 要复制「整个元素」（含自己）→ 用
outerHTML - 只要复制「里面的内容」（不含当前标签）→ 用
innerHTML -
textContent或innerText是纯文本，不带任何 HTML 标签，别混用
示例：
const el = document.querySelector('.card');
const htmlString = el.outerHTML; // ✅ 包含 <div>...</div>
navigator.clipboard.writeText(htmlString);
用 navigator.clipboard.writeText() 复制 HTML 字符串会丢样式吗
不会丢，但浏览器只认字符串——它不管你是 HTML 还是 Markdown，一律当纯文本塞进剪贴板。粘贴到支持富文本的地方（比如 Gmail、Notion、Typora），能正常渲染；粘贴到记事本、终端、代码编辑器，默认就显示为源码。
立即学习“前端免费学习笔记（深入）”；
也就是说：复制行为本身不处理样式，渲染效果取决于目标应用是否解析 HTML。
- 目标是网页编辑器或邮件客户端 →
outerHTML+writeText()足够 - 目标是 Word 或某些旧版富文本控件 → 它们可能不识别标准 HTML，需要转成
text/html格式（要用clipboard.write()配合Blob，但兼容性差） - Chrome/Firefox 支持
writeText()，Safari 16.4+ 才支持，老 Safari 会失败，得降级 fallback
点击按钮复制 HTML，为什么控制台报错 NotAllowedError: Write permission denied
这是权限问题，不是代码写错了。现代浏览器强制要求：调用 writeText() 必须发生在用户手势触发的上下文中，比如 click、keydown，且不能异步延迟太久。
典型翻车现场：
button.addEventListener('click', () => {
setTimeout(() => {
navigator.clipboard.writeText(el.outerHTML); // ❌ 延迟后失去上下文
}, 100);
});
- ✅ 正确做法：所有
writeText()调用必须在事件回调同步执行，或最多用Promise.resolve().then(...)微任务保上下文 - ❌ 不要在
fetch回调、setTimeout、requestIdleCallback里直接调 - 记得加
try/catch，捕获NotAllowedError并友好提示用户“请再点一次”
服务端生成的 HTML 片段，前端复制时怎么避免转义混乱
如果后端返回的是已转义的字符串（比如把 返回成 <code><），前端直接复制就会粘贴出一堆实体字符，而不是可运行的 HTML。
本质是前后端对「内容语义」没对齐：后端以为你在渲染，前端却想复制原始结构。
- 后端应提供两套字段：
html（未转义原始 HTML）和html_escaped（用于安全 innerHTML 插入） - 前端复制前先检查字符串是否含
<、>—— 如果有，说明已被转义，需用DOMParser解码：const decoded = new DOMParser().parseFromString(escapedHtml, 'text/html').body.textContent;
- 更稳妥的做法：后端统一返回原始 HTML，前端按需转义（插入 DOM 时用
textContent或手动 escape），复制时直接取原始值
这个环节容易被忽略，尤其在 CMS 或低代码平台导出场景里，看似“复制成功”，粘贴出来却是满屏 和 "。
