DeepSeek调成DOM的步骤详解

在使用 DeepSeek 等大语言模型生成内容时，有时需要将模型返回的 HTML 字符串安全、高效地插入到网页中，形成可交互的 DOM 元素。本文将详细介绍这一过程的关键步骤。

1. 获取模型返回的 HTML 字符串

假设 DeepSeek 返回如下格式的内容：

<div class="result">
  <h3>这是由 DeepSeek 生成的内容</h3>
  <p>包含段落、列表等结构。</p>
  <ul>
    <li>项目一</li>
    <li>项目二</li>
  </ul>
</div>

2. 创建临时容器并解析 HTML

使用 DOMParser 或 innerHTML 将字符串转为 DOM 节点（推荐使用 DOMParser 更安全）：

const htmlString = `<div class="result">...</div>`;
const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, 'text/html');
const element = doc.body.firstElementChild;

3. 插入到页面指定位置

document.getElementById('output').appendChild(element);

4. 安全注意事项

• 避免直接使用 innerHTML 插入不可信内容，以防 XSS 攻击。
• 建议对模型输出进行过滤或使用可信上下文（如仅允许特定标签）。
• 生产环境中可结合 DOMPurify 等库进行净化。

5. 完整示例

async function renderDeepSeekResult() {
  const response = await fetch('/api/deepseek', { method: 'POST' });
  const data = await response.text(); // 假设返回纯 HTML 字符串

  const parser = new DOMParser();
  const doc = parser.parseFromString(data, 'text/html');
  const cleanNode = doc.body.firstElementChild;

  if (cleanNode) {
    document.getElementById('container').innerHTML = '';
    document.getElementById('container').appendChild(cleanNode);
  }
}