我正在使用 SweetAlert 插件来显示警报。使用经典配置（默认），一切顺利。但是当我想在文本中添加 HTML 标签时，它会显示
<b>...</b>如何让SweetAlert也用HTML代码显示文本？
var hh = "<b>test</b>";
swal({
title: "" + txt + "",
text: "Testno sporocilo za objekt " + hh + "",
confirmButtonText: "V redu",
allowOutsideClick: "true"
});
SweetAlert 存储库似乎没有维护。有一堆 Pull 请求没有任何回复，最后一次合并的 Pull 请求是在 2014 年 11 月 9 日。
我创建了 SweetAlert2，在模式中支持 HTML 以及一些其他用于自定义模式窗口的选项 - 宽度、填充、Esc 按钮行为等。
Swal.fire({
title: "<i>Title</i>",
html: "Testno sporocilo za objekt: <b>test</b>",
confirmButtonText: "V <u>redu</u>",
});<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>最近合并到 GitHub 上的 master 分支中，添加了允许 HTML 作为标题和文本参数的功能https://github.com/t4t5/sweetalert/commit/9c3bcc5cb75e598d6faaa37353ecd84937770f3d
只需使用 JSON 配置并将 'html' 设置为 true，例如：
swal({ html:true, title:'<i>TITLE</i>', text:'<b>TEXT</b>'});
这是在不到一周前合并的，并在 README.md 中有所暗示（尽管没有明确描述，但在其中一个示例中 html 设置为 false），但尚未在营销页面上记录 http://tristanedwards .me/sweetalert
我正在从旧的 sweetalert 升级，并在新版本中找到了如何操作（官方文档）：
// this is a Node object
var span = document.createElement("span");
span.innerHTML = "Testno sporocilo za objekt <b>test</b>";
swal({
title: "" + txt + "",
content: span,
confirmButtonText: "V redu",
allowOutsideClick: "true"
});
Sweet Alerts 还有一个 'html' 选项，将其设置为 true。
var hh = "<b>test</b>";
swal({
title: "" + txt + "",
html: true,
text: "Testno sporocilo za objekt " + hh + "",
confirmButtonText: "V redu",
allowOutsideClick: "true"
});
我只是为此苦苦挣扎。我从 sweetalert 1 -> 2 升级。这个库：https://sweetalert.js.org/guides/
文档“string”中的示例没有按我的预期工作。你不能这样说。
content: `my es6 string <strong>template</strong>`
我是如何解决的：
const template = (`my es6 string <strong'>${variable}</strong>`);
content: {
element: 'p',
attributes: {
innerHTML: `${template}`,
},
}
没有文档说明如何执行此操作，这纯粹是反复试验，但至少看起来可行。
截至 2018 年，接受的答案已过时：
Sweetalert 已维护，您可以使用 content 选项解决原始问题的问题。
使用 SweetAlert 的
html您可以将输出 html 直接设置为此选项：
var hh = "<b>test</b>";
swal({
title: "" + txt + "",
html: "Testno sporocilo za objekt " + hh + "",
confirmButtonText: "V redu",
allowOutsideClick: "true"
});
或者
swal({
title: "" + txt + "",
html: "Testno sporocilo za objekt <b>teste</b>",
confirmButtonText: "V redu",
allowOutsideClick: "true"
});
有甜蜜警报版本 1 和 2。 实际版本 2 适用于 HTML 节点。
我有一个 Sweet Alert 2，其数据表单如下所示：
<script>
var form = document.createElement("div");
form.innerHTML = `
<span id="tfHours">0</span> hours<br>
<input style="width:90%;" type="range" name="tfHours" value=0 step=1 min=0 max=25
onchange="window.changeHours(this.value)"
oninput="window.changeHours(this.value)"
><br>
<span id="tfMinutes">0</span> min<br>
<input style="width:60%;" type="range" name="tfMinutes" value=0 step=5 min=0 max=60
onchange="window.changeMinutes(this.value)"
oninput="window.changeMinutes(this.value)"
>`;
swal({
title: 'Request time to XXX',
text: 'Select time to send / request',
content: form,
buttons: {
cancel: "Cancel",
catch: {
text: "Create",
value: 5,
},
}
}).then((value) => {
console.log(value);
});
window.changeHours = function (value){
var tfHours = document.getElementById("tfHours");
tfHours.innerHTML = value;
}
window.changeMinutes = function (value){
var tfMinutes = document.getElementById("tfMinutes");
tfMinutes.innerHTML = value;
}
我知道我的答案可能来得太晚了，但我找到了一个适合我的修复方法。
var html_element = '<p><code>This</code> is an error</p>';
swal({ title: "My Title", text: "", html: true, confirmButtonText: "Okay" });
使用 javascript setTimeout 函数将您的 html 附加到甜蜜警报中。我发现将超时设置为 210 效果很好
setTimeout(function(){ $('.sweet-alert p:eq(0)').html(html_element) },210);
你已经做到了！
您所要做的就是将 html 变量启用为 true ..我遇到了同样的问题，我所要做的就是 html : true ,
var hh = "<b>test</b>";
swal({
title: "" + txt + "",
text: "Testno sporocilo za objekt " + hh + "",
html: true,
confirmButtonText: "V redu",
allowOutsideClick: "true"
});
注意：
html : "Testno sporocilo za objekt " + hh + "",html : "Testno sporocilo za objekt " + hh + "",您可以在隐藏的 div 中使用已编译的元素，并通过 id 获取 div 并像这样放置：
var wrapper = document.getElementById('yourdiv');
swal({
icon: "sucess",
text: "Your Content",
content: wrapper
})
我假设字符串中不接受
</尝试在正斜杠“/”前面加上反斜杠“\”来转义它，例如：
var hh = "<b>test<\/b>";