在前端渲染后端返回的纯 HTML 文本有几种常见方法：

1. 使用 innerHTML (最简单的方式)

// 假设 response.html 是后端返回的HTML字符串
const htmlString = '<div>Hello <strong>World</strong>!</div>';

// 渲染到DOM元素中
document.getElementById('container').innerHTML = htmlString;

⚠️ 安全警告：直接使用 innerHTML 可能有 XSS 风险，确保HTML内容可信或已转义。

2. 使用 DOMParser (更安全的解析方式)

const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, 'text/html');

// 可以操作DOM后再插入
const cleanHTML = doc.body.innerHTML;
document.getElementById('container').innerHTML = cleanHTML;

3. 使用 insertAdjacentHTML

// 比 innerHTML 更灵活，可以控制插入位置
document.getElementById('container').insertAdjacentHTML(
  'beforeend', // 位置：beforebegin, afterbegin, beforeend, afterend
  htmlString
);

4. 使用 React 的 dangerouslySetInnerHTML (React 专用)

function MyComponent({ htmlContent }) {
  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
}

5. 使用 Vue 的 v-html (Vue 专用)

<template>
  <div v-html="htmlContent"></div>
</template>

6. 使用 Angular 的 [innerHTML] (Angular 专用)

@Component({
  template: `<div [innerHTML]="htmlContent"></div>`
})

⚠️ 重要安全提示

如果 HTML 来自用户输入或不可信来源，必须：

1. 净化HTML：使用库如 DOMPurify

   import DOMPurify from 'dompurify';
   const cleanHTML = DOMPurify.sanitize(htmlString);

2. 避免直接渲染：特别是包含 <script>、<iframe> 等危险标签的内容

完整的安全示例

async function renderSafeHTML() {
  const response = await fetch('/api/get-html');
  const htmlString = await response.text();
  
  // 净化HTML
  const cleanHTML = DOMPurify.sanitize(htmlString);
  
  // 渲染
  document.getElementById('container').innerHTML = cleanHTML;
}

选择哪种方式取决于：

• 你的前端框架

• 对性能的需求

• 内容的安全要求

• 是否需要操作DOM节点而不仅是字符串