如何在SweetAlert2.0中显示表格、div等HTML元素？

看起来你可能混淆了SweetAlert的版本——你引入的是SweetAlert 1.x的脚本（https://unpkg.com/sweetalert/dist/sweetalert.min.js），而你提到的SweetAlert2是另一个独立的库，API有所不同。不过不管是哪个版本，都支持嵌入自定义HTML，下面分别给你说明：

一、针对你当前使用的SweetAlert 1.x #

在SweetAlert 1.x中，你需要通过html选项开启HTML解析，并传入自定义HTML内容（不要用默认的text选项）。比如要显示一个表格：

swal({
  title: "自定义HTML弹窗",
  html: true, // 必须开启这个开关，才会解析HTML
  text: `
    <div style="padding: 15px;">
      <h4>用户信息表</h4>
      <table border="1" cellpadding="6" style="border-collapse: collapse;">
        <tr><th>ID</th><th>姓名</th><th>邮箱</th></tr>
        <tr><td>1</td><td>张三</td><td>zhangsan@example.com</td></tr>
        <tr><td>2</td><td>李四</td><td>lisi@example.com</td></tr>
      </table>
    </div>
  `
});

只要设置html: true，SweetAlert就会把你传入的内容当作HTML渲染，而不是纯文本显示。

二、如果你确实想使用SweetAlert2 #

如果你是想使用SweetAlert2（版本2.x及以上），首先需要替换你的引入脚本为SweetAlert2的CDN：

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

SweetAlert2的API更简洁，直接用html选项传入HTML内容即可，不需要额外的开关：

Swal.fire({
  title: "自定义HTML弹窗",
  html: `
    <div class="custom-popup-content">
      <p>这是一个自定义Div容器</p>
      <table style="width: 100%; margin-top: 10px; border-collapse: collapse;">
        <thead>
          <tr><th>产品名称</th><th>价格</th></tr>
        </thead>
        <tbody>
          <tr><td>无线耳机</td><td>299元</td></tr>
          <tr><td>机械键盘</td><td>499元</td></tr>
        </tbody>
      </table>
    </div>
  `,
  confirmButtonText: "确认"
});

你可以在html里放入任何合法的HTML元素，包括表格、div、图片甚至表单控件，SweetAlert2会自动解析渲染。

常见排查要点 #

• 如果HTML没显示，先检查SweetAlert 1.x是否开启了html: true；
• 确保你的HTML代码没有语法错误（比如标签未闭合）；
• 弹窗内的样式可能被SweetAlert默认样式覆盖，你可以给自定义元素加类名，然后写专属CSS来调整样式。

内容的提问来源于stack exchange，提问作者sayyed tabrez