复制目标元素内容应优先用innerHTML（含标签的富文本）或textContent（纯文本防XSS），禁用innerText；Layui中须用navigator.clipboard.writeText()并在click事件中调用，降级用execCommand+textarea，反馈用layer.msg()而非alert。
复制目标元素的 innerHTML 还是 textContent？
关键看你要复制什么。如果目标是按钮、带样式的文字块或含标签的富文本内容，得用 innerhtml；如果只是纯文本（比如一个 <div>hello</div> 里的 “hello”），用 textcontent 更安全——它不会把标签当字符串复制进去，也不会触发 xss 风险。
常见错误：直接复制 innerText，它在 Firefox 下对隐藏元素返回空字符串，且会折叠空白；textContent 行为更一致。
实操建议：
- 要复制带格式的 HTML 片段（如含
<strong>、<br>的公告栏），取element.innerHTML - 只复制用户可见文字（比如表单提示、标题），取
element.textContent - 避免用
outerHTML，除非你明确需要连同该元素自身标签一起复制
Layui 中调用原生 Clipboard API 复制
Layui 本身不封装复制功能，得靠浏览器原生的 navigator.clipboard.writeText()。它返回 Promise，必须在用户手势（如 click）中调用，否则会被浏览器拒绝。
常见错误现象：Failed to execute 'writeText' on 'Clipboard': Document is not focused 或直接静默失败——通常是因为没在 click 回调里调用，或用了异步延迟（比如 setTimeout 包裹）。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 绑定 click 事件必须用 Layui 的
layui.use('element')后的element.on('click(...)，或原生addEventListener - 复制逻辑写在事件回调第一层，别包在
async/await之外的异步链里 - 记得加
.catch捕获拒绝（比如用户禁用剪贴板权限）
示例：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
document.getElementById('copyBtn').addEventListener('click', function() {
const target = document.getElementById('contentBox');
navigator.clipboard.writeText(target.innerHTML)
.then(() => console.log('复制成功'))
.catch(err => console.error('复制失败:', err));
});
兼容性兜底：IE 或旧版 Edge 怎么办？
navigator.clipboard 在 IE 完全不支持，旧版 Edge（≤17）也不支持。如果你的项目还需兼容这些环境，得降级用 document.execCommand('copy') + <textarea> 中转。
性能与风险注意：这个老方案要临时插入并聚焦一个 <textarea>，可能触发页面滚动或焦点丢失；而且 execCommand 已被标记为废弃，Chrome 90+ 对非安全上下文（非 HTTPS）已禁用。
实操建议：
- 优先检测
navigator.clipboard是否可用，不可用再走降级路径 - 降级时，
<textarea>必须position: absolute; left: -9999px;，避免视觉跳动 - 不要用
document.write或修改 DOM 树结构频繁操作，容易引发重排
按钮点击后给用户反馈，但别用 alert
alert 会阻塞主线程、打断用户操作流，Layui 用户习惯的是右上角小 toast。可以用 layer.msg()，它轻量、不中断交互，且默认 2 秒自动消失。
容易踩的坑：在 clipboard.writeText().then() 里直接调 layer.msg('成功') 没问题，但如果没引入 layer 模块，会报 layer is not defined；另外，多次快速点击可能堆积多个 toast。
实操建议：
- 确保已通过
layui.use(['layer'], callback)加载 layer 模块 - 复制成功后调用
layer.msg('已复制', {time: 1500})，缩短显示时间避免干扰 - 失败反馈别只打 console，也用
layer.msg('复制失败，请重试', {icon: 2})
真正麻烦的不是复制动作本身，而是目标元素里有动态渲染内容、iframe、或跨域 script 标签——这些节点的 innerHTML 可能包含无法执行或不合法的字符串，复制前最好先做简单清洗（比如去掉 <script> 标签）。
