什么是“把 DeepSeek 调成 DOM”?
在前端开发中,我们常常希望 AI(如 DeepSeek)不仅能生成文本,还能生成可直接插入网页的 HTML 结构。 这就是“把 DeepSeek 调成 DOM”的核心思想:引导模型输出合法、安全、结构清晰的 HTML 片段,并通过 JavaScript 动态渲染到页面中。
基本实现方式
以下是一个简单的示例,展示如何将 AI 返回的 HTML 字符串安全地转换为 DOM 元素:
// 假设这是 DeepSeek 返回的 HTML 字符串
const aiOutput = '<div><h3>你好,世界!</h3><p>这是由 AI 生成的内容。</p></div>';
// 创建一个临时容器
const tempDiv = document.createElement('div');
tempDiv.innerHTML = aiOutput;
// 将内容插入到页面中(例如某个容器)
document.getElementById('content').appendChild(tempDiv.firstElementChild);
⚠️ 注意:在生产环境中,应始终对 AI 输出进行 XSS 过滤或使用安全的 DOM 解析库(如 DOMPurify)。
应用场景
- 动态生成文章摘要或卡片
- AI 辅助的表单或报告生成
- 聊天机器人返回富文本消息